高DPR時代のレスポンシブ画像設計とimage-set活用 2025

“綺麗さ”と“転送量”の最適点は、srcset/sizesとCSSのimage-set()で決まります。

TL;DR

• 固定幅要素はx記法（1x/2x）で十分。可変幅要素はw記法 + sizes

• テキスト背面の背景画像はCSSのimage-set()でDPR別に切替

• ビットマップの上限を設け、装置ピクセル比が高くても過剰転送を防ぐ

• LCP候補は別途 fetchpriority="high" で優先度を明示

• 内部リンク: srcset生成ツール, INPを悪化させない配信, 画像優先度とpreload

使い分け早見表

• 固定カード/サムネ: srcset="... 1x, ... 2x"
• ヒーロー/可変レイアウト: srcset="... 800w, ... 1200w" + sizes
• CSS背景: background-image: image-set(url(...@1x.avif) 1x, url(...@2x.avif) 2x)

実装例

<img
  src="/imgs/card@1x.avif"
  srcset="/imgs/card@1x.avif 1x, /imgs/card@2x.avif 2x"
  width="320" height="200" alt="カード"
  decoding="async" loading="lazy"
/>

<!-- 可変レイアウト: w+sizes -->
<img
  src="/imgs/hero-1200.avif"
  srcset="/imgs/hero-800.avif 800w, /imgs/hero-1200.avif 1200w, /imgs/hero-1600.avif 1600w"
  sizes="(max-width: 768px) 92vw, 1200px"
  width="1200" height="630" fetchpriority="high"
  alt="ヒーロー"
/>

.hero {
  background-image: image-set(
    url('/imgs/cover@1x.avif') 1x,
    url('/imgs/cover@2x.avif') 2x
  );
  background-size: cover;
}

失敗しがちなポイント

• sizesが常に100vw → 実描画より大きい画像が選ばれ帯域過剰
• 2x画像のビットレートを1xと同等に → ファイル倍増。PSNR/SSIMで品質管理
• CSS背景での1x/2x準備なし → テキストが滲む/重い

運用のコツ

• 自動生成（CI）の導入で @1x/@2x や w段差を一括出力
• image-set() の定義をテーマ変数化して再利用
• LCP候補は別枠で調整（優先度/プレロード）

チェックリスト

• [ ] 固定はx、可変はw+sizesの原則を適用
• [ ] CSSのimage-set()で高DPRをケア
• [ ] LCP候補は fetchpriority を設定
• [ ] 計測で無駄転送とぼやけを同時に監視

まとめ

端末ごとの“見え方”と“転送量”を同時に満たすには、srcset/sizes/image-set()の三点を道具箱に。