※ 当サイトではアフィリエイト広告を利用しています。
こんにちは、meiです。
今回はpicture要素についてまとめていきたいと思います。
picture要素で画像を出し分けるメリットは
・特定の形式（AVIFやWebP）に対応していないブラウザに対して代替画像を提供できる
・読み込む端末の条件（media）に合わせて画像を変更できる
・最適な画像のみ読み込むので表示が早くなるなどだと思います。
mediaに合わせて画像を変更するのはcssで対応できますが、cssで対応した場合は画像を一旦読み込んだ後にdisplay:noneなどの処理がされることになるので、表示速度の点から考えるとpicture要素を使って画像を出し分けるほうがよいと言えます。
画像は上から順に読み込まれていき、対応していない・該当していない場合は次のコードにスキップされます。
※cssは（object-fitなどを適用する場合などがあると思いますが）pictureタグにではなく、imgタグにあてます。
WebP やAVIFに対応していないブラウザに対して代替画像を提供する場合
・WebP（ウェッピー）：Googleが開発している画像フォーマット。JPEGファイルの25～34％、PNGファイルの28％、ファイルサイズが小さくなる。
・AVIF：JPEGよりも圧縮効率が優れている。WebPよりもさらに高画質でコンパクト。
<picture>
<source srcset="/img/sample.avif" type="image/avif" />
<source srcset="/img/sample.webp" type="image/webp" />
<img src="/img/sample.jpg" alt="">
</picture>読み込む端末の条件（media）に合わせて画像を変更する場合
<picture>
<source media="(min-width: 769px)" srcset="/img/sample.jpg">
<img src="/img/sample_sp.jpg" alt="">
</picture>srcset属性を使用して出し分ける場合
画像幅wで画像サイズを宣言しておくと、ブラウザはウィンドウサイズに応じて最適な画像を選んでくれます。
<picture>
<source srcset="/img/sample_large.jpg 769w" sizes="100vw" media="(min-width: 769px)" />
<source srcset="/img/sample_medeum.jpg 768w, /img/sample_small.jpg 500w," sizes="100vw" media="(max-width: 768px)" />
<img src="/img/sample_large.jpg" alt="">
</picture>srcsetには画像と画像のサイズを記載します。
サンプルコードの例だと、
画面幅が769pxまではsample_large.jpgを、
画面幅が500pxまではsample_small.jpgを、
画面幅が768pxまではsample_medeum.jpgを読み込みます。
sizesには画面幅に対しての画像の表示幅を指定します。
srcsetは解像度（1x,2xなど）でも指定できます。その場合はsizesの指定はできません。
srcset属性をimg要素で使うこともできます。
<img srcset="
/img/sample_small.jpg 768w,
/img/sample_medeum.jpg 1024w,
/img/sample_large.jpg 1200w"
src="/img/sample_large.jpg"
sizes="(max-width: 1024px) 100vw, 1024px"
/>サンプルコードのsizes=”(max-width: 1024px) 100vw, 1024px”は、画面幅1024pxまでは100vwで、それ以上の画面幅の時は1024pxで表示するということになります。
番外編：背景画像で画像形式を出し分けたい場合
cssのimage-setを使います。
background-image: image-set(
url(/img/sample.webp) type('image/webp'),
url(/img/sample.jpg) type('image/jpg')
);まとめ
軽くて早い設計が求められる中で、picture要素はぜひ使っていきたいところです。htmlサイドで設定できるので、手間も省けますしいいところだらけですね！
