画像したい（picture）

<picture>
    <source srcset="image.webp" type="image/webp">
    <source srcset="image.jpg" type="image/jpeg">
    <img src="image.jpg" alt="画像の説明">
</picture>

<picture>要素は、複数の画像を切り替えて表示するための要素です。 <source>で指定した画像のうち、ブラウザが対応している形式のものが表示されます。

上記のサンプルでは、 WebP形式に対応しているブラウザではimage.webpが、 対応していないブラウザではimage.jpgが表示されます。

アートディレクションしたい（media）

<picture>
    <source media="(max-width: 480px)" srcset="image-mobile.webp" type="image/webp">
    <source media="(min-width: 481px)" srcset="image-desktop.webp" type="image/webp">
    <img src="image-desktop.jpg" alt="画像の説明">
</picture>

media属性で、画面サイズに応じて表示する画像を切り替えることができます。 表示条件はメディアクエリしたい（@media）を参照してください。

リファレンス

• picture

• source

• img