HTML［img要素］レスポンシブイメージを設定する（画像サイズの最適化） - TAG index

srcset属性における既定の記述子は 1x となります。 画像表示を最適化するレスポンシブイメージは、img要素またはpicture要素で設定することができます。それぞれの特徴は次のようになります。 img要素による設定 同じ内容の画像で、サイズ違いをセットしたい場合に使用します。条件の設定は可能ですが、実際にどの画像が使用されるかはブラウザ側に任されています。img要素だけで設定できるので、比較的シンプルに（？）記述することができます。 picture要素による設定 サイズ違いだけでなく、内容の異なる画像をセットしたい場合に使用します（例えば、スマホ向けにはクロップされた画像を表示させたい場合など）。picture要素による設定では、指定した条件下で強制的に画像を切り替えることができます。 上記の2つを組み合わせることで、より詳細に設定することも可能です。 srcset属性とsizes