Retinaディスプレイとは？仕組み・Web制作への影響・2x画像対応を徹底解説

Retinaディスプレイとは何か

Retinaディスプレイは、2010年にAppleがiPhone 4で初めて採用した高解像度ディスプレイの商標名です。「Retina（レティナ）」とは英語で「網膜」を意味し、「肉眼では画素を識別できないほど精細な表示」という意味合いで名付けられました。

現在では、MacBook・iPhone・iPad・Apple Watchなど、ほぼすべてのApple製品に搭載されています。さらにAndroidスマートフォンや高品質なWindowsラップトップにも同等の高解像度ディスプレイが普及しており、2026年時点ではスマートフォンの大半が高解像度ディスプレイを搭載していると考えてよい状況です。

Web制作者がRetinaディスプレイを意識しなければならない理由は明快です。通常解像度向けに作られた画像をRetina環境で表示すると、画像が引き伸ばされてぼやけて見えるからです。この問題を解決するために、Web制作現場では専用の対応が必要になります。

仕組み：デバイスピクセル比（DPR）を理解する

Retinaディスプレイを理解するうえで欠かせないのが「デバイスピクセル比（DPR：Device Pixel Ratio）」という概念です。

CSSピクセルとデバイスピクセルの違い

Webブラウザで使われる「CSSピクセル」は論理的な単位で、実際の物理的な画面ピクセル（デバイスピクセル）とは別物です。DPRはこの2つの比率を表します。

具体例で理解する

CSSで width: 300px と指定した画像を考えてみましょう。DPR=1の環境では300×300デバイスピクセルで表示されますが、DPR=2の環境では600×600デバイスピクセルの領域に表示しようとします。元画像が300pxしかなければ、2倍に引き伸ばされてぼやけてしまいます。

Web制作への影響：なぜ画像がぼやけるのか

Retinaディスプレイで画像がぼやける原因は、ブラウザの画像レンダリングの仕組みにあります。ブラウザは画像をCSSで指定したサイズに拡大・縮小して表示します。この際、元画像の解像度が不足していると、ブラウザが補間処理（画素を補う処理）を行い、ぼやけた見た目になります。

影響を受ける要素

• ラスター画像（JPEG・PNG・GIF・WebP）：ピクセルデータで構成されるため、拡大するとぼやける
• CSSスプライト画像：アイコンをまとめた画像もRetina対応が必要
• 背景画像（background-image）：CSSで指定した背景もぼやける対象になる
• Canvasに描画した画像：JavaScriptでCanvasに描く場合も対応が必要

影響を受けない（受けにくい）要素

• テキスト：ブラウザがフォントをベクター的にレンダリングするため鮮明
• SVG画像：ベクター形式のため、どんな解像度でも鮮明に表示される
• CSSで描いた図形・グラデーション：ベクター的に処理されるため鮮明

つまり、Web制作でRetina対応が必要なのは主に「ラスター画像」です。ロゴやアイコンをSVGで作成するだけでも、多くの問題を根本から解決できます。

実践的な対応方法①：srcset属性で画像を切り替える

HTML標準の srcset 属性を使うと、ブラウザがDPRに応じて最適な画像を自動選択します。追加のJavaScriptは不要で、現在最もシンプルかつ推奨される方法です。

x記述子（密度ベース）の書き方

ロゴ・アイコンなど表示サイズが固定の要素には x記述子 が適しています。

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"
  alt="WEB制作.com ロゴ"
  width="200"
  height="60"
>

w記述子（幅ベース）の書き方

レスポンシブレイアウトで画像サイズが変わる場合は w記述子 と sizes 属性を組み合わせます。ブラウザがDPRとビューポート幅の両方を考慮して最適画像を選択してくれます。

<img
  src="photo-640.jpg"
  srcset="photo-640.jpg 640w, photo-1280.jpg 1280w, photo-1920.jpg 1920w"
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px"
  alt="サービスのイメージ画像"
  width="1200"
  height="630"
>

x記述子 vs w記述子の選び方

pictureタグで両方を同時に制御する

異なるブレークポイントで画像のアスペクト比やトリミング位置を変えたい場合は <picture> タグが有効です。アートディレクションとDPR対応を同時に実現できます。

<picture>
  <source
    media="(max-width: 767px)"
    srcset="hero-sp.jpg 1x, hero-sp@2x.jpg 2x"
  >
  <source
    media="(min-width: 768px)"
    srcset="hero-pc.jpg 1x, hero-pc@2x.jpg 2x"
  >
  <img src="hero-pc.jpg" alt="ヒーローイメージ" width="1440" height="600">
</picture>

実践的な対応方法②：CSSメディアクエリでの背景画像対応

CSS の background-image で設定した画像は srcset が使えません。代わりに -webkit-device-pixel-ratio や標準の resolution メディアクエリを使います。

CSSメディアクエリの書き方

/* 通常解像度（デフォルト） */
.hero {
  background-image: url("hero.jpg");
  background-size: cover;
}

/* Retina（DPR 2x以上） */
@media
  (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
  .hero {
    background-image: url("hero@2x.jpg");
  }
}

/* DPR 3x以上 */
@media
  (-webkit-min-device-pixel-ratio: 3),
  (min-resolution: 288dpi) {
  .hero {
    background-image: url("hero@3x.jpg");
  }
}

background-sizeの設定を忘れずに

2x画像をそのまま表示すると2倍のサイズで表示されてしまいます。必ず background-size を設定して表示サイズを制御しましょう。

/* 2x画像を元の表示サイズに収める例 */
.icon {
  width: 40px;
  height: 40px;
  background-image: url("icon@2x.png");
  background-size: 40px 40px; /* 表示サイズ＝CSSピクセルのサイズ */
}

実践的な対応方法③：SVGとWebPの活用

SVGで根本解決する

ロゴ・アイコン・図解・グラフなどをSVG形式で書き出すことで、Retina対応の問題を根本から解消できます。SVGはベクター形式のため、どんなDPRでも鮮明に表示されます。

• ファイルサイズが小さい（シンプルなアイコンはPNGより軽量）
• CSSやJavaScriptでアニメーション・色変更が可能
• すべての主要ブラウザで対応済み
• 2x・3x画像を別途用意する手間が不要

Illustratorや Figmaなどのデザインツールから直接SVGで書き出す運用を取り入れると、制作効率も大きく上がります。

WebP形式で容量を削減しながら高画質を維持する

写真・バナーなどJPEG・PNGを使わざるを得ない場面では、WebP形式への移行を検討しましょう。WebPはJPEGと比較して25〜35%程度ファイルサイズを削減しながら、同等以上の画質を維持できます。

<picture>
  <!-- WebP対応ブラウザはこちら（Retina向け2x） -->
  <source
    type="image/webp"
    srcset="photo.webp 1x, photo@2x.webp 2x"
  >
  <!-- フォールバック（JPEG） -->
  <img
    src="photo.jpg"
    srcset="photo.jpg 1x, photo@2x.jpg 2x"
    alt="サービス紹介"
    width="800"
    height="450"
  >
</picture>

画像ファイルの命名規則とワークフロー

Retina対応を継続的に運用するには、チーム内で統一されたファイル命名規則と制作ワークフローが重要です。

推奨ファイル命名規則

実践的なワークフロー

1. デザイン段階：FigmaやXDでは2倍サイズでデザインし、1x・2x・3xをまとめてエクスポートする
2. 画像書き出し：JPEG・PNGはWebPも同時生成（ImageMagick・Squoosh・gulp-webpなどで自動化）
3. ファイル圧縮：TinyPNGやImageOptimで圧縮してからCMSへアップロード
4. HTML実装：srcsetとsizesを正しく設定し、width・height属性を必ず指定してCLS（レイアウトシフト）を防ぐ
5. 確認：Chrome DevToolsでDPRを2x・3xに切り替えて画像が切り替わるか確認する

Chrome DevToolsでの確認方法

実際にRetina対応が効いているかは、Chrome DevToolsの「デバイスツールバー」で確認できます。

1. F12でDevToolsを開く
2. スマートフォンアイコン（Toggle device toolbar）をクリック
3. 「iPhone 15 Pro」などのRetina端末を選択
4. ネットワークタブで読み込まれている画像URLを確認（@2x.jpgが読み込まれていればOK）

よくある質問