スマホやタブレットでWebサイトを見ると、
「画像がくっきりしてきれい」「でも時々ぼやけて見える」——
この違いは Retinaディスプレイ と 画像解像度 に関係があります。
この記事では、Retinaディスプレイの仕組みから、
画像を最適化するための srcset 属性・x記述子・w記述子の使い方を、
Web制作者にも初心者にもわかりやすく解説します。
目次
1. Retinaディスプレイとは？
Retinaディスプレイとは、Appleが提唱した高解像度ディスプレイのこと。
「人間の目では1つ1つのピクセルを識別できないほど高密度」という意味を持っています。
たとえば、同じサイズの画面でも：
- 通常のディスプレイ → 1pxに1つの点（ドット）
- Retinaディスプレイ → 1pxに縦横2×2（4倍）の点
つまり、情報量が4倍で、文字も画像も滑らかに見えるのです。
| 比較 | 通常ディスプレイ | Retinaディスプレイ |
|---|---|---|
| ピクセル密度 | 約100〜150ppi | 約300ppi以上 |
| 1CSSピクセルあたりの物理ドット数 | 1×1 | 2×2（4倍） |
| 表示の印象 | やや粗い | なめらか・高精細 |
2. ピクセルには2種類ある
Webで「ピクセル（px）」といっても、実は2種類あります。
| 名称 | 意味 | 例 |
|---|---|---|
| CSSピクセル | CSSで指定する仮想的な単位（width: 200px など） | デザイン上の大きさ |
| デバイスピクセル | 画面に実際に存在する物理ドット | 実際の表示解像度 |
通常のディスプレイでは、1CSSピクセル = 1デバイスピクセル
ですが、Retinaディスプレイでは、1CSSピクセル = 2×2（計4）デバイスピクセル
そのため、画像をそのまま表示すると「引き伸ばされたようにぼやける」わけです。
3. DPR（Device Pixel Ratio）とは？
ブラウザには「devicePixelRatio（DPR）」という値があり、
「1CSSピクセルを何個のデバイスピクセルで描くか」を示しています。
| 端末 | DPR値 | 備考 |
|---|---|---|
| 一般的なPC | 1 | 通常表示 |
| MacBook Retina | 2 | 高精細表示 |
| iPhone 14 | 3 | 超高精細 |
DPR=2 の端末では、
CSS上の100pxを実際には 200px × 200px の領域で描画します。
だから、2倍サイズの画像（@2x）を用意しないとぼやけるのです。
4. Retinaで画像がぼやける理由
例えば width: 200px; の画像を表示した場合：
- DPR=1（通常） → 実際に200pxで描画 → 問題なし
- DPR=2（Retina） → 実際には400px領域に引き伸ばされる → ぼやける
これを防ぐには、解像度の異なる画像を複数用意して切り替える必要があります。
その切り替えを自動でやってくれるのが srcset 属性 です。
5. x記述子とw記述子の違いを理解しよう
x記述子（倍率ベース）
x は 倍率（pixel density） を意味します。
画面のピクセル密度（DPR）に応じて画像を切り替えます。
<img
src="logo@1x.png"
srcset="logo1x.png 1x, logo2x.png 2x, logo3x.png 3x"
width="150" height="50"
alt="ブランドロゴ">
| 環境 | 読み込まれる画像 |
|---|---|
| DPR=1 | logo1x.png |
| DPR=2 | logo2x.png |
| DPR=3 | logo3x.png |
固定サイズ（ロゴ・アイコンなど）に最適。
DPRに合わせて「より精細な」画像を自動選択します。
w記述子（幅ベース）
w は width（幅） の略で、画像ファイルの「実際の横幅（ピクセル）」を表します。
ブラウザは sizes と組み合わせて、「今この画面で画像を何pxで表示するか」を計算します。
<img
src="photo-960.jpg"
srcset="
photo-480.jpg 480w,
photo-720.jpg 720w,
photo-960.jpg 960w,
photo-1440.jpg 1440w"
sizes="(max-width: 600px) 100vw, (max-width: 1024px) 75vw, 720px"
width="960" height="640"
alt="レスポンシブ対応画像">
| 状況 | ブラウザの動作 |
|---|---|
| 画面幅 500px | 480w の画像を選択 |
| 画面幅 900px | 720w の画像を選択 |
| 画面幅 1200px | 960w or 1440w の画像を選択 |
| さらにRetina(DPR=2)なら | 表示幅×2 ≒ 1440wを選択 |
レイアウトが変わる画像（記事中の写真・バナーなど）に最適。
より「レスポンシブ」な動的対応が可能です。
6. 2つの違いを表で整理
| 比較項目 | x記述子 | w記述子 |
|---|---|---|
| 意味 | 倍率（pixel density） | 幅（width） |
| 目的 | デバイス密度ごとに画像切替 | 表示領域ごとに画像切替 |
| 主な用途 | 固定サイズ（ロゴ・アイコン） | 可変サイズ（写真・バナー） |
| 指定例 | 1x, 2x, 3x | 480w, 960w, 1920w |
sizes属性 | 不要 | 必要 |
| ブラウザの判断基準 | DPR（devicePixelRatio） | 表示幅 × DPR |
| 注意点 | 同じsrcsetでwは混在不可 | sizesを書かないと100vw扱い |
7. たとえるなら
- x記述子は「同じロゴをどれくらい細かく描くか」
- w記述子は「レイアウトに合わせてどのサイズの画像を使うか」
つまり：
📱 x記述子＝“ピクセル密度に合わせてくっきり見せる”
💻 w記述子＝“画面サイズに合わせて最適化する”
8. 両方を使いたいときは <picture>
同時に使うことはできませんが、
<picture> を使えば「場面に応じて」別々の設定が可能です。
<picture>
<!-- モバイル用縦長（w記述子） -->
<source
media="(max-width: 600px)"
srcset="mv-portrait-600.webp 600w, mv-portrait-900.webp 900w"
sizes="100vw"
type="image/webp">
<!-- PC用横長（w記述子） -->
<source
media="(min-width: 601px)"
srcset="mv-landscape-1200.webp 1200w, mv-landscape-1800.webp 1800w"
sizes="(max-width: 1200px) 90vw, 1080px"
type="image/webp">
<!-- フォールバック -->
<img
src="mv-landscape-1200.jpg"
width="1200" height="800"
alt="ヒーロー画像">
</picture>
9. よくあるミスと注意点
| ミス | 問題点 | 対策 |
|---|---|---|
| sizesを省略 | 常に100vw扱いで重くなる | レイアウトに合わせて書く |
| 同一srcsetにxとwを混在 | 仕様上エラーになる | <picture>で分ける |
| LCP画像にlazyを付ける | 表示が遅れる | fetchpriority=”high”推奨 |
| width/height省略 | CLS（レイアウトずれ）発生 | 必ず指定 |
| SVG使わずPNGロゴを拡大 | ぼやける | SVG化が最適 |
10. 実務でのおすすめ設計フロー
- 固定画像（ロゴ・アイコン）は x記述子 or SVG
- 写真やバナーなど可変画像は w記述子＋sizes
- トリミングやフォーマット切替が必要なときは picture
- すべてのimgに width / height を指定（CLS対策）
- DevToolsで DPRを切替して確認
11. まとめ
| 要点 | 内容 |
|---|---|
| Retinaは「高密度ディスプレイ」 | 通常の2倍以上のピクセル密度 |
| ぼやけを防ぐには | 2x/3x画像を用意する |
| x記述子 | 固定サイズの解像度切替 |
| w記述子 | 表示幅ベースのレスポンシブ対応 |
| 両立 | pictureタグで使い分け |
| 最後に大事なこと | width/height指定・fetchpriorityの最適化 |
