srcset
読み: そーすせっと
HTML の img 要素で複数の画像候補を指定する属性。ブラウザがデバイスの条件に応じて最適な画像を自動選択する仕組みを提供する。
srcset は HTML の <img> 要素に追加する属性で、異なるサイズや解像度の画像候補をカンマ区切りで列挙する。ブラウザはデバイスのピクセル密度 (devicePixelRatio) やビューポート幅に基づいて最適な候補を自動選択し、ダウンロードする。
記述方式は 2 種類ある。幅記述子 (w) は画像の実際のピクセル幅を示し、sizes 属性と組み合わせて使用する。ピクセル密度記述子 (x) は 1x、2x、3x のように Retina 対応の倍率を指定する。
例: <img srcset="photo-320w.jpg 320w, photo-640w.jpg 640w, photo-1280w.jpg 1280w" sizes="(max-width: 600px) 100vw, 50vw" src="photo-640w.jpg">
レスポンシブ画像の実装において srcset は中核的な役割を果たす。一括リサイズツールで複数サイズの画像を生成し、srcset に列挙することで、デバイスに最適な解像度の画像が配信される。