例えば、スマホ端末に対して1920×1080の画像を表示するのはムダです。 もっと小さいサイズでいいですからね。 逆にデスクトップPCだと画面が大きいので、1920×1080の画像を表示しても良いですよね。 このように デスクトップPC →1024×682の画像を表示する ノートパソコンPC →640×426の画像を表示する スマホ →400×266の画像を表示する という風に、大きさの異なる画像を出し分けたいときに使うのがsrcset属性です。 srcset属性のデモページ(ソース) ※後述していますが、ChromeやSafariの場合はスーパーリロードしないと画像が切り替わりません 例えば、以下のように書くと <img srcset="small.png 400w, medium.png 640w, large.png 1024w" src="large.png" /> imgタグは、
![pictureタグとsrcset属性の違い。超わかりやすく](https://cdn-ak-scissors.b.st-hatena.com/image/square/e6eb99121aca2d93d3bca3ae48977b7993e40913/height=288;version=1;width=512/https%3A%2F%2Fpenpen-dev.com%2Fblog%2Fwp-content%2Fuploads%2Fsrcset-picture.png)