pictureタグ
色んな条件に応じて画像の切り替えとかを行えるタグ
あとはWebP対応のブラウザでだけWebP表示するとか 大体<source>と組み合わせて使うと思う
code:html
<picture>
<source srcset="img1.jpg" media="(min-width: 1024px)"/>
<source srcset="img2.jpg" media="(min-width: 768px)" />
<img src="default.jpg" />
</picture>
imgタグのsrcがフォールバックになる感じ
display:noneとかを使って画像を切り替えるのとは違って、適合した画像だけが読み込まれるというメリットがある
あとは<source>のsrcsetにも画像のリストを書くことができて、retina対応みたいなことができる