レスポンシブ画像：srcset、sizes、デバイスピクセル比の使い方

元画像のピクセル、CSS ピクセル、DPR を分ける

幅 800 ピクセルのファイルが、ページでも幅 800 CSS ピクセルになるとは限りません。ブラウザーは幅 400 CSS ピクセルの領域に表示できます。DPR が 2 なら、その領域は横方向で約 800 デバイスピクセルです。これは解像度計画の関係であり、最終的な資源選択はブラウザーが行います。

最初に表示領域を求めます。この例では 800 と「ビューポート幅から 32 を引いた値」の小さい方です。それに DPR を掛けると、参考になる元画像幅が得られます。画像が細いカラムにある場合、ビューポート全体の幅をそのまま DPR 倍してはいけません。

表示幅が変わるレイアウトには幅記述子を使う

w 記述子はファイル本来のピクセル幅を表します。ブレークポイントではなく、実際の資源寸法と一致させます。sizes は現在のレイアウトで予定される表示幅です。以下の例ではビューポートが 832 CSS ピクセル以上なら 800、それより狭ければ両側の余白を引きます。

併記した CSS も例の一部です。後で半幅のグリッドに入れるなら、sizes もそのグリッドに合わせて更新します。古い全幅の説明を残すと、コンポーネントに不要な大きい画像を選ばせることがあります。sizes は人気端末の幅を列挙する欄ではなく、実際のレイアウトの説明です。

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

候補を予測してから実際の選択を調べる

幅 392、DPR 2 の画面では表示幅が 360 CSS ピクセル、目標は 720 ピクセルです。この候補一覧なら 800w が妥当な予想です。広い画面の DPR 2 では目標が 1600 になります。計算は選択に与える情報を説明しますが、必ずそのファイルを取得するという強制指示ではありません。

ブラウザーは別の条件も考慮でき、画面を縮めても既に取得した大きい画像を保持する場合があります。検証では端末設定を先に選び、新しいページ環境や再読み込みで、選択 URL と転送量を開発者ツールで確認します。読み込み済みページを何度も縮めるだけでは誤解が生じます。

生成処理も候補一覧に対応させます。実際に 400、800、1600 ピクセルのファイルを作り、画質と各 URL の応答を確認します。同じ 1600 ピクセルのファイルを複製して別の w 値を付けても、転送やデコードの負担は減りません。

• ビューポートと同じだと決めつけず、要素の実際の表示幅を確認する。
• currentSrc の URL とネットワークパネルの画像応答を照合する。
• 画像寸法、応答種別、キャッシュ状態、転送バイト数を確認する。
• 狭い画面と広い画面で、DPR 1 と DPR 2 をそれぞれ確認する。
• 読み込み前後の横方向のはみ出しとレイアウト移動を調べる。

固定サイズには x 記述子を選べる

固定幅で表示する小さなロゴには密度記述子が使えます。幅 120 CSS ピクセルで表示するなら、120 ピクセルのファイルを 1x、240 ピクセルを 2x とします。同じ表示寸法に対する別解像度の指定です。同一 srcset の中で x と w を混ぜてはいけません。

異なる切り抜きは別の設計問題です。モバイルでは顔の近景、デスクトップでは広い風景を使いたい場合、picture と適切なメディア条件によるアートディレクションを検討します。本文の主例は構図を変えず解像度だけを変えます。代替テキストは意味のある内容を説明します。

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

縦横比と読み込み方法も一緒に計画する

width と height 属性は、画像到着前に縦横比に基づく領域を確保するのに役立ちます。CSS が幅を変更した後もその CSS 寸法を強制するものではありません。4:3 の例では、表示幅 800 なら高さ 600、幅 360 なら高さ 270 です。

長いページの下部画像には遅延読み込みが役立ちますが、最初に見える重要画像の要求を一律に遅らせるべきではありません。配置に応じて判断します。候補サイズは余分なピクセルを減らし、圧縮、形式、読み込み方針はそれぞれ別のコストを扱います。

未圧縮画像のメモリとネットワーク上のファイルサイズも異なります。小さな WebP が大きなピクセルバッファーに展開される場合があります。画像メモリ計算機にはデコード後の寸法を使い、圧縮ファイルのバイト数は実測します。

公開前にコンポーネントの契約を確認する

レイアウトと画像生成の規則を一緒に保存します。候補幅、切り抜き、縦横比、品質設定、sizes 式を記録すれば、デザイン変更でまとめて更新できます。最大幅を 800 から 1000 ピクセルに変えた場合も候補を再確認します。

フォールバックの src、すべての srcset URL、意味のある代替テキスト、予約領域を検証します。CSS からデバイスピクセルへの計算機で自分の幅と DPR を再現し、縦横比計算機で高さを求めます。固定余白を含む例を単に 100% と説明し直すと、実際の表示領域と一致しなくなります。