Retinaスクリーンショット

Retinaスクリーンショットは、高DPI（Retina）ディスプレイで撮影した画像です。表示中のビューポートより縦横のピクセル寸法が2倍または3倍になり、鮮明な一方、ファイルサイズも大きくなります。

Related workflow terms: ピクセル密度.

Retinaスクリーンショットが大きい理由

標準密度のディスプレイでは、1 CSSピクセルが1物理ピクセルに対応します。幅1,440 CSSピクセルのブラウザウインドウから、幅1,440ピクセルのスクリーンショットができます。

デバイスピクセル比（DPR）が2のRetinaディスプレイでは、1 CSSピクセルを2×2の物理ピクセルで描画します。同じ幅1,440 CSSピクセルのウインドウから、幅2,880ピクセルの画像ができます。上位モバイル端末に多いDPR 3なら、幅4,320ピクセルです。

視覚的な単位あたりの細部が増えて鮮明になりますが、ファイルも大きくなります。2倍のRetina画像には、同じビューポートを1倍で撮った画像の4倍のピクセルがあります。縦横それぞれ2倍だからです。ファイルサイズも増え、1倍で500 KBのPNGが2倍では1.5〜2 MBになる場合があります。

画面では小さく見える部分を撮影しても、論理ピクセルより物理ピクセルがはるかに多いため、大きな高解像度画像ができることがあります。

影響する場面

• Web表示： 2倍の画像をピクセル寸法どおりWebページへ置くと、想定の2倍に表示されます。CSSのwidthとheightまたはwidth属性で論理サイズへ合わせると、Retina画面で特に鮮明に見えます
• 印刷： Retina撮影の追加ピクセルが役立ちます。2倍画像なら、1倍では粗く見える大きさでも、300 DPIで実用的な物理サイズへ印刷しやすくなります
• ドキュメント： 高DPI画面では鮮明ですが、Web配信には大きすぎる場合があります。1.5倍へリサイズするか、レスポンシブ画像を用意すると、鮮明さと容量を調整できます
• ファイル保存： Retinaディスプレイで数百ページを一括撮影すると、1倍より大幅にデータが増えます。保存容量と通信量を見積もるときは、ファイル増加を考慮してください

撮影解像度を調整する方法

多くの撮影ツールとヘッドレスブラウザでは、デバイスピクセル比を明示できます。

PuppeteerとPlaywrightでは、deviceScaleFactorオプションがDPRを制御します。実際のディスプレイに関係なく、1にすると標準密度、2にするとRetina相当の画像になります。

macOSの標準スクリーンショット機能（Cmd＋Shift＋3またはCmd＋Shift＋4）は、常にディスプレイのネイティブDPRで撮影します。Retina MacBookでは2倍です。サードパーティ製ツールには、1倍で撮影できるものもあります。

WindowsのSnipping Tool（Win＋Shift＋S）は、システムの表示倍率に合わせて撮影します。ディスプレイと設定により、100%（1倍）、125%、150%（実質1.5倍）、200%（2倍）などになります。

自動撮影ツールによっては、撮影ごとにDPRを指定し、1回の一括処理で1倍と2倍の両方を生成できます。

繰り返し撮影する場合、「Retina」は実質的に「デバイスピクセル比を明示して撮影する」という意味です。コードで固定すれば、レビューしやすい小さい1倍画像と、マーケティング、印刷、保管に使う鮮明な2倍画像を目的に応じて選べます。

よくある失敗

• WebでRetina画像をピクセル寸法どおり表示する： 幅2,880ピクセルの画像をCSSで指定せずに置くと、標準ディスプレイでは幅2,880 CSSピクセルとなり、想定よりはるかに大きくなります。表示寸法を必ず明示してください
• 一括処理でファイルサイズを考慮しない： 500ページを1倍ではなく2倍で撮ると、合計保存容量はおよそ4倍になります。大規模な撮影前にRetina解像度が必要か判断します
• 不適切な再サンプリングで縮小する： 2倍画像をニアレストネイバー法で1倍へ縮小すると、輪郭がぎざつきます。滑らかな縮小にはバイキュービック法またはLanczos法を使います
• すべての画像がRetinaだと思う： 異なる端末を使うと、1倍と2倍の画像が混ざり、寸法がそろいません。撮影時のDPRを統一するか、明示的に指定できる自動ツールを使います