01

表示サイズと元画像サイズを分ける

CSSは画像が占める領域を決め、srcsetは候補ファイルを提供します。ブラウザはviewport、sizes、DPRから取得元を選ぶため、width属性だけでは実際の転送量は分かりません。

360、393、768、1440、1920pxなどでCSS上の幅と取得画像の幅を記録します。高DPR用に少し大きい画像は必要ですが、390pxのスマホで理由なく2400px画像を取得しないようにします。

02

sizesを実際のレイアウトに合わせる

sizesはデザインのブレークポイントではなく、各条件での実際の表示幅を表します。PCの記事画像が720pxで止まる場合、100vwと書くと過大な画像を選びやすくなります。

<img
  src="/hero-960.webp"
  srcset="/hero-640.webp 640w, /hero-960.webp 960w, /hero-1440.webp 1440w"
  sizes="(max-width: 720px) 100vw, 720px"
  alt="レスポンシブレイアウトのテスト画面"
>
03

LCP画像を優先する

ファーストビューのメイン画像がLCP要素ならlazy-loadを避け、HTMLから早く発見できるようにし、寸法を指定します。下部画像は遅延読込で初期通信の競合を減らします。

低速回線で再読込し、Cookie表示やカルーセルが別のviewportでLCPになっていないか確認します。

04

切り抜き、比率、レイアウトシフト

object-fit: coverは比率を守りますが、人物、商品、画像内文字を切る場合があります。縦向き、横向き、タブレット、大画面で重要部分を確認します。

  • widthとheightまたはaspect-ratioで領域を確保
  • アートディレクション画像の切替条件を確認
  • ファイル名ではなく内容を説明するaltを設定
  • 2×、3× DPRでアイコンと細線を確認
05

再現可能な画像記録を作る

viewportごとに表示幅、選択元、転送量、形式、LCP、切り抜きを記録します。同じ回線とキャッシュ条件で再テストし、改善がキャッシュではなく実装によるものか判断します。