Retinaディスプレイとレスポンシブ画像の基本｜なぜ2倍サイズの画像が必要なのか

「画像を2倍サイズで用意してください」とデザイナーや先輩から言われて、なぜ？と思ったことはありませんか。スマホやMacのディスプレイで写真がぼやけてしまう原因と、それを防ぐための画像の扱い方をわかりやすく解説します。

まず「ピクセル」の話から

画面の映像は無数の小さな点の集まりで表示されています。この点1つひとつをピクセル（px）と呼びます。

CSSで width: 300px と書いたとき、この「300px」は実は画面上の物理的なドット数ではありません。ブラウザが計算に使う「CSS上の仮想的なピクセル」です。これを論理ピクセル（CSS px）といいます。

一方、ディスプレイに実際に並んでいるドットの数を物理ピクセル（デバイスピクセル）といいます。

昔のディスプレイはこの2つが1:1で対応していました。しかしスマートフォンや高解像度のPCが普及した現在、この比率が変わってきました。

Retinaディスプレイとは何か

Appleが「Retina（レティーナ）ディスプレイ」と呼ぶ高解像度画面では、論理ピクセル1pxの領域に物理ピクセルが縦横2つずつ、合計4つ敷き詰められています。

この仕組みによって文字や図形は非常に滑らかに見えます。ところが画像ファイルにはこの恩恵が自動では届きません。

よく使われるデバイスのDPRと画面サイズ

「自分のスマホはDPRがいくつなのか」を知っておくと、画像サイズを決めるときの判断がしやすくなります。代表的なデバイスの論理解像度・物理解像度・DPRをまとめました。

iPhone（iOS）

Android スマートフォン

タブレット

PC・Mac

デバイス別まとめ：DPRの傾向

現在のWebサイト訪問者の多くはスマートフォンからのアクセスです。2x対応を基本として画像を準備しておけば、ほぼすべての主要デバイスで画像のぼやけを防げます。

なぜ画像だけぼやけるのか

論理ピクセル 300px 幅の領域に、実際には 600 物理ピクセルが存在しています。ここに 300×300px の画像ファイルを表示しようとすると、ブラウザは1つの画像ピクセルを4つの物理ピクセルに拡大して描画します。この「引き伸ばし」がぼやけの正体です。

つまり「2倍サイズの画像を用意する」理由は、Retinaディスプレイの600物理ピクセルに対して画像側も600px分の情報を持たせるためです。

2倍画像を使う基本的な書き方（srcset）

HTMLには srcset（ソースセット）という属性があり、ディスプレイの解像度に応じて最適な画像を自動で切り替えられます。

<img
  src="image.jpg"
  srcset="image.jpg 1x, image@2x.jpg 2x"
  alt="サンプル画像"
  width="300"
  height="200"
>

上記のように書くと、DPR=1の環境では image.jpg、DPR=2以上の環境では image@2x.jpg が自動的に選択されます。ファイル名に @2x を付けるのは慣習的な命名ルールで、技術的な制約ではありません。

画面サイズによって画像を切り替える（sizes との組み合わせ）

Retinaへの対応（解像度の違い）に加えて、PCとスマホで表示サイズ自体が異なるケースもあります。たとえばPCでは画像を600px幅で表示し、スマホでは画面幅いっぱいに表示したい場合です。

そのときは sizes 属性と srcset の w（幅）記法を組み合わせます。

<img
  src="image-600.jpg"
  srcset="image-300.jpg 300w,
          image-600.jpg 600w,
          image-1200.jpg 1200w"
  sizes="(max-width: 768px) 100vw, 600px"
  alt="サンプル画像"
>

ブラウザはこの情報をもとに「画面サイズ × DPR」を計算し、srcset の中から最適な画像を選びます。通信量の節約にもつながります。

PCとスマホで画像ファイルを丸ごと切り替える（picture タグ）

横長のバナー画像をスマホでは縦長に切り替えたい、というようにトリミングや構図ごと変えたい場合は <picture> タグを使います。

<picture>
  <source media="(max-width: 767px)" srcset="image-sp.jpg">
  <img src="image-pc.jpg" alt="サンプル画像">
</picture>

<source> タグの条件（media属性）に一致した場合はそちらの画像が使われ、どの条件にも一致しない場合は <img> のsrcがフォールバックとして使われます。

CSS背景画像のRetina対応

CSSの background-image で画像を使う場合は、メディアクエリで対応します。

/* 通常ディスプレイ用 */
.hero {
  background-image: url("hero.jpg");
}
/* Retina対応（DPR 1.5以上に適用） */
@media (-webkit-min-device-pixel-ratio: 1.5),
       (min-resolution: 144dpi) {
  .hero {
    background-image: url("hero@2x.jpg");
    background-size: cover;
  }
}

background-size: cover を忘れずに指定しましょう。2倍サイズの画像をそのままの大きさで表示してしまうと意図しない表示になります。

まとめ：Retina対応 実装の選び方

最初のうちは srcset="image.jpg 1x, image@2x.jpg 2x" の書き方を覚えるだけで十分です。レスポンシブ全体の仕組みと組み合わせて理解を深めたい方は、レスポンシブWebデザインの基本の記事もあわせてご覧ください。

よくある疑問Q&A

Q. 全部の画像を2倍で用意しないといけませんか？

ロゴ・アイコン・目立つバナーなど、ぼやけが気になりやすい画像から優先的に対応しましょう。写真ならぼやけが比較的目立ちにくいこともあります。SVGで作れるアイコンやロゴは解像度に依存しないのでベストな選択です。

Q. 2倍画像にするとページが重くなりませんか？

ファイルサイズは大きくなります。srcsetを正しく使えばDPR=1の環境では軽い画像が読み込まれるため、すべてのユーザーに重い画像を送ることにはなりません。また WebP（ウェブピー）フォーマットを使うとJPGより大幅にファイルサイズを削減できます。

Q. SVGってどんな画像ですか？

SVG（Scalable Vector Graphics）はドットではなく「線の数式」で画像を表現するファイル形式です。どれだけ拡大してもぼやけません。ロゴ・アイコン・シンプルなイラストに最適です。写真のような複雑な画像には使えません。