srcset、sizes、pictureはどのようにレスポンシブ画像を提供しますか？

• srcset は、候補画像を固有の幅 (400w = 400px幅) とともにリストします。
• sizes は、異なるブレークポイントで画像が表示される幅をブラウザに指示します (ここでは: 600px未満ではビューポート全幅、それ以外では半幅)。
• ブラウザは sizes とデバイスのピクセル密度を組み合わせて、まだ鮮明に見える最小の画像を選択します — ダウンロード前に。

携帯電話は small.jpg を選択する可能性があります。Retinaラップトップが50%の幅で表示する場合は large.jpg を選択する可能性があります。

picture — アートディレクション / 異なるフォーマット

ブラウザは、サポート/一致する最初の <source> を使用します。異なるフォーマット (JPEGフォールバック付きのAVIF/WebPを提供) またはスクリーンサイズごとに異なるクロップ (アートディレクション) が必要な場合は <picture> を使用します — srcset だけではできない事柄です。

srcset vs picture — どちらを選ぶ？

• 同じ画像、異なるサイズのみ → srcset + sizes。
• 異なるフォーマットまたは異なるクロップ → <picture>。

なぜ重要なのか

適切なサイズと最新フォーマットの画像を提供することは、ウェブのパフォーマンス向上における最大のメリットの1つです。モバイルデータ使用量を大幅に削減し、Largest Contentful Paintを改善します。

これらのネイティブツールにより、ブラウザは自動的に最適な選択を行でき、古いブラウザでも適切なフォールバックが用意されています。