Retina Display Images: High-DPIスクリーンでシャープなグラフィックを配信する方法

最終更新日: 2026年6月30日

Retinaや高DPIのスクリーンは、同じ物理空間により多くのピクセルを詰め込むため、標準的な画面サイズで作成された画像は、これらのデバイス上ではぼやけたりピクセル化したりして見えます。これらのスクリーンでシャープな画像を配信するには、より高解像度のバージョンを用意し、ブラウザにいつそれを使用するかを伝える必要があります。本ガイドでは、2xおよび3xのワークフロー、適切なファイルを配信するためのsrcsetマークアップ、そして鮮明さとページ全体の重さ（ウェイト）のバランスについて解説します。

クイックアンサー：Retinaスクリーンで画像をシャープにするにはどうすればよいですか？

画像を表示ピクセルサイズの2倍（スマートフォン向けには3倍）のバージョンを作成し、srcset属性を使用して両方のバージョンを提供します。ブラウザは、表示できるスクリーンでのみ高解像度ファイルを読み込むため、標準的なディスプレイでは余分なバイトをダウンロードしません。400ピクセルの幅で表示される写真の場合、Retina用には800ピクセル（2x）のソースが必要です。適切な圧縮率で両方をエクスポートしてください — 2xファイルは大きいですが、解像度が上がると圧縮効率が向上するため、単純に2倍になるわけではありません。

Retinaまたは高DPIディスプレイとは何ですか？

Retinaディスプレイは、人間の目が通常の視距離から個々のピクセルを区別できないほど十分なピクセル密度を持つスクリーンに対するマーケティング用語です。Appleが造語しましたが、この概念はほとんどの最新のスマートフォン、タブレット、ラップトップに適用されます。実用的な測定基準はデバイスピクセル比（DPR）であり、これは1つのCSSピクセルを何個の物理ピクセルが表しているかを示します。

• 2xのスクリーンは、シャープに見えるために線形ピクセルを2倍（合計で4倍）必要とします。
• 3xのスマホスクリーンは、線形ピクセルを3倍必要とします。
• 標準的な1xスクリーンはベース画像をダウンロードし、無駄になりません。

Mozilla guide to device pixel ratioでは、ブラウザがDPRをどのように報告し使用するかを文書化しており、これはすべてのRetina画像戦略の基礎となっています。

2xおよび3xの画像バージョンはどのように作成しますか？

小さなファイルをアップスケールするのではなく、高解像度のソースから各ターゲットサイズに画像リサイズツールすることから始めます。400ピクセル幅の表示スロットを想定した写真には、400px (1x) と 800px (2x) のバージョン、そしてスマホ向けには 1200px (3x) のバージョンが必要です。

1. 最大のターゲット（3x）と同じかそれ以上のサイズのソースから開始します。
2. 1x、2x、3xの幅に画像リサイズツールします。
3. 各バージョンを画像圧縮ツールします — 2xおよび3xファイルはピクセルあたりの圧縮がより優れています。
4. 最も高品質で小さなファイルをWebPとしてエクスポートします。
5. すべてのバージョンを提供し、ブラウザに選択させます。

• 小さい画像を2xにアップスケールすることは決してしないでください — ぼやけたままで、ただ重くなるだけです。
• 2xファイルは、より良い圧縮のおかげで、通常1xファイルのバイト数の2倍を下回ります。
• 3xバージョンは、小さく高密度のスクリーンを持つスマートフォンにとって最も重要です。

srcsetを使って適切なバージョンを配信する方法は？

<img>タグのsrcset属性は、スクリーンのDPRに基づいてブラウザにどのファイルを読み込むかを指示します。選択はブラウザが行うため、ユーザーがオプションとマークアップを提供する必要があります。

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Descriptive alt text"
  width="400" height="300"
/>

• 1x、2x、3xのディスクリプタは、ファイルをデバイスピクセル比にマッピングします。
• ブラウザが画面に一致するバージョンのみを読み込みます。
• レイアウトシフトを防ぐために、常にwidthとheightを含めてください。
• src属性は古いブラウザのためのフォールバックです。

画面幅によって寸法も変化するレスポンシブ画像の場合、srcsetをsizes属性と幅ディスクリプタ（400w、800w）と組み合わせて使用し、DPRディスクリプタを使用しないようにしてください。より高度なパターンについてはresponsive images guideがカバーしており、またimage SEO guideでは、シャープで適切にサイズの画像を正しく最適化することが検索パフォーマンスにも役立つ方法を説明しています。

ラスタ形式ではなくSVGを使用すべき時

ロゴ、アイコン、フラットな形状のイラストの場合、SVGを使用することで2x/3xの問題全体を回避できます。ベクターグラフィックは無限にスケーリングでき、解像度のペナルティがありません — 同じSVGファイルは、ピクセルとして保存されるのではなく数学から描かれるため、1xモニターでも3xスマホでもシャープです。

画像が写真的なディテールではなく形状で構成されている場合は、SVGが適切な答えです。トレードオフとしては、SVGも最適化が必要である点があります — 未使用のメタデータやエディターのゴミが肥大化させるため — そして、ベクターをレンダリングできない環境でラスタフォールバックが必要な場合のワークフローはSVG to PNG guideがカバーしています。ヘッダーにロゴがあるブランドサイトの場合、SVGを使用することでその要素に関してはRetinaの問題が完全に解消されます。

Retina画像をテストする

ファイルを生成するのは作業の半分であり、実際に正しく読み込まれているかを確認するのがもう半分です。いくつかのチェックを行うことで、単に間違ったファイルがサイレントに配信されているのではなく、セットアップが機能していることが確認できます。

1. Retinaデバイスでページを開くか、開発者ツールでブラウザのDPRを2xに設定します。
2. 画像要素を検証し、ロードされたcurrentSrcが2xまたは3xファイルであることを確認します。
3. 1x DPRに切り替え、代わりに1xファイルがロードされることを確認します。
4. ネットワークタブを確認し、スクリーンごとにバージョンが一つだけダウンロードされていることを検証します。
5. Retinaスクリーンで100%表示し、画像がぼやけておらずシャープであることを確認します。

ブラウザの開発者ツールにおけるデバイスピクセル比の上書き機能を使用すると、物理的なデバイスなしでテストできますが、実際のRetinaスクリーンこそが最終的な証明となります。一般的な失敗モードは、srcset内のマークアップのタイプミスにより、ブラウザがベースのsrcにフォールバックし、エラーを出すことなくRetina上でぼやけて見える場合です。ネットワークタブはこの問題をすぐに検出します — 2xスクリーンで1xファイルがロードされている場合、srcsetは正しく配線されていません。

シャープさとページウェイトのバランスを取る

Retina画像における落とし穴は、すべてのスクリーンに高解像度ファイルを配信してしまうことです。これは、違いを見ることができないユーザーにとって、ページの重さを2倍または3倍にしてしまいます。srcsetアプローチはこの問題を回避しますが、小さなバージョンを実際に生成し、それらを参照する場合に限ります。すべての人に提供される単一の3xファイルが最も一般的な間違いです。

web.dev guide to responsive imagesでは、これを正しく行うことによるパフォーマンスへの影響を文書化しており、またCore Web Vitals guideは、画像ウェイトとランキングに影響を与えるLCPメトリックを直接関連付けています。目標は、必要な場所でシャープさを保ちつつ、それ以外の場所では抑制することです — ブラウザに選択させ、ブラウザが選べるようにすべてのバージョンを生成することが重要です。

よくある質問

Retinaスクリーンで画像をシャープにするにはどうすればよいですか？

ラスタ画像の場合、ディスプレイサイズで2x（オプションで3x）のバージョンを使用し、srcsetを使ってデバイスピクセル比に基づいてブラウザに正しいファイルを選択させます。Retinaスクリーン上の1x画像はぼやけて見えますが、2xバリアントはそのシャープさを回復させます。

すべてのグラフィックに2x画像が必要ですか？

シャープなグラフィックやヒーロー写真には必要です — そうでない場合、Retinaスクリーンではぼやけが見えるからです。装飾的な画像や画面の下部にある画像の場合、単一の1xファイルで十分なことがよくあります。非Retinaデバイスが大きなファイルをダウンロードしないように、srcsetを使用して両方を提供してください。

2xラスタではなくSVGをいつ使用すべきですか？

ロゴ、アイコン、フラットグラフィックの場合、はい — SVGは解像度に依存せず、追加ファイルなしでどのサイズでもシャープなままです。写真の場合は、依然としてラスタ（2xバリアント付き）が適切な選択肢です。SVG to PNG guideを参照してください。

Retina画像はどのように配信しますか？

srcsetを使用して1xおよび2x（オプションで3x）のソースを使用し、デバイスピクセル比に基づいてブラウザに選択させます。古いブラウザがクリーンにフォールバックできるように、デフォルトのsrcとして1xを送信してください。ブラウザが必要なバリアントのみをダウンロードします。

srcsetはページを遅くしますか？

いいえ — ブラウザが必要な単一のバリアントのみをダウンロードするため、小さなスクリーンには小さなファイルが届きます。srcsetがない場合、すべてのデバイスが最大のファイルをダウンロードしてしまいます。srcsetはバイト数を節約するものであり、追加するものではありません。