レスポンシブ画像
読み: れすぽんしぶがぞう
デバイスの画面サイズや解像度に応じて最適なサイズ・フォーマットの画像を配信する技術。不要に大きな画像の転送を防ぎ、パフォーマンスを向上させる。
レスポンシブ画像 (Responsive Image) は、閲覧デバイスの画面幅やピクセル密度に応じて適切なサイズの画像を配信する仕組みである。スマートフォンに 4000px 幅の画像を送信するのは帯域の無駄であり、表示サイズに合った画像を選択的に配信することで転送量を大幅に削減できる。
HTML では srcset 属性と sizes 属性を使い、ブラウザに複数の候補画像を提示する。<picture> 要素を使えばフォーマットの出し分け (WebP 対応ブラウザには WebP、非対応には JPEG) も可能である。
実装には複数サイズの画像を事前に生成する必要がある。一括リサイズツールで 320px、640px、1280px、1920px などの複数バリエーションを生成し、srcset に列挙するのが一般的なワークフローである。遅延読み込みと組み合わせることで、必要な画像だけを必要なサイズで読み込む効率的な配信が実現する。