レスポンシブ画像により、ブラウザはデバイスに最適な画像を選択できます。これにより、携帯電話での帯域幅を節約し、高DPIスクリーンに鮮明な画像を配信します。
<img
src="small.jpg"
srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
alt="A landscape"
/>
srcset は、候補画像を固有の幅 (400w = 400px幅) とともにリストします。sizes は、異なるブレークポイントで画像が表示される幅をブラウザに指示します (ここでは: 600px未満ではビューポート全幅、それ以外では半幅)。sizes とデバイスのピクセル密度を組み合わせて、まだ鮮明に見える最小の画像を選択します — ダウンロード前に。携帯電話は small.jpg を選択する可能性があります。Retinaラップトップが50%の幅で表示する場合は large.jpg を選択する可能性があります。
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
ブラウザは、サポート/一致する最初の <source> を使用します。異なるフォーマット (JPEGフォールバック付きのAVIF/WebPを提供) またはスクリーンサイズごとに異なるクロップ (アートディレクション) が必要な場合は <picture> を使用します — srcset だけではできない事柄です。
srcset + sizes。<picture>。適切なサイズと最新フォーマットの画像を提供することは、ウェブのパフォーマンス向上における最大のメリットの1つです。モバイルデータ使用量を大幅に削減し、Largest Contentful Paintを改善します。
これらのネイティブツールにより、ブラウザは自動的に最適な選択を行でき、古いブラウザでも適切なフォールバックが用意されています。