srcsetとDPRによるレスポンシブ画像
HTMLのsrcset属性とピクセル密度記述子を使用して解像度に適した画像を提供します。sizesと組み合わせたビューポートベースのレスポンシブ画像読み込みも解説します。
Practical
詳細な説明
レスポンシブ画像とデバイスピクセル比
各デバイスのDPRに合った正しい画像解像度を提供することで、Retina画面でのぼやけた画像を防ぎ、標準ディスプレイでの帯域幅の無駄を避けます。
DPRベースのsrcset
<img
src="photo-400.jpg"
srcset="
photo-400.jpg 1x,
photo-800.jpg 2x,
photo-1200.jpg 3x
"
alt="製品写真"
width="400"
height="300"
/>
sizes付きの幅ベースsrcset
<img
srcset="
photo-320.jpg 320w,
photo-640.jpg 640w,
photo-960.jpg 960w,
photo-1280.jpg 1280w
"
sizes="
(max-width: 640px) 100vw,
(max-width: 1024px) 50vw,
33vw
"
src="photo-640.jpg"
alt="レスポンシブ写真"
/>
パフォーマンスのヒント
srcset内でモダンフォーマット（WebP、AVIF）を使用すると、すべてのDPR値で品質を維持しながらファイルサイズを大幅に削減できます。
ユースケース
画像の多いページ（ECサイト、ポートフォリオ、メディアサイト）を構築するWeb開発者は、srcsetとsizesを使用してRetinaディスプレイでシャープに見える適切なサイズの画像を帯域幅を無駄にせず提供する必要があります。