HTML
srcset
中級読み方：ソースセット｜英語：Srcset
img要素で画面サイズに応じて異なる画像を読み込む属性。高解像度ディスプレイ対応に使う。
やさしい説明
srcsetは、画面サイズや解像度に応じて最適な画像を自動選択する仕組みです。
スマホには小さい画像、PCには大きい画像を配信することで、通信量を節約しつつ高画質を実現します。
具体例・使い方
img srcset=photo-320w.jpg 320w, photo-640w.jpg 640w sizes=(max-width:600px) 320px, 640px
Retinaディスプレイ向けに2x画像を指定することもできる
よくある疑問
Q: srcsetとpictureの違いは？
A: srcsetは同じ画像の解像度違い、pictureはフォーマットやアートディレクションの切り替えに使います。