レスポンシブ画像は、モバイルユーザーがデスクトップ向けの大きな画像をダウンロードして帯域幅を無駄にし、ページ表示を遅くすることを防ぎます。HTML では、解像度の切り替えに srcset 属性、アートディレクションに picture 要素を使い、デバイスごとに異なる切り抜きや形式を配信できます。Next.js などのモダンなフレームワークは、1つの元画像から複数サイズを生成し、ビューポートに応じて最適な版を配信します。WebP と AVIF 形式に JPEG フォールバックを組み合わせることで、帯域幅をさらに削減できます。レスポンシブ画像は Core Web Vitals に重要です。大きすぎる画像は Largest Contentful Paint を遅らせ、ユーザー体験と検索順位の両方に影響します。