画像の最適化

画像ラベル

1)タイプ分岐

(avif対応){ AVif出力 }else if(wepbがサポートされている場合){ webp出力 } else { jpg出力 }

<picture>
	<source srcset="x.avif" type="image/avif">
  	<source srcset="x.webp" type="image/webp">
  	<img src="x.jpg" alt>
</picture>

2）メディアブランチ

width 960以下は小さい。webp出力 以上が大きいwebp出力

<picture>
  <source srcset="small.webp" media="(max-width:960px)">
  <img src="large.webp" alt>
</picture>

3）解像度分岐

2 xが元または表示の場合の画像

<picture>
  <source srcset="2x.webp 2x, 1x.webp" type="image/webp">
  <img srcset="2x.jpg 2x" src="1x.jpg" alt>
</picture>

imgラベル

<img loading="lazy" decoding="async" alt>

1) loading="lazy"

イメージのロード時間を後にします。ビューポート内のイメージのみをロードします。

2) decoding="async"

画像復号は、画像以外のコンテンツを迅速に表示するために非同期処理される。

<picture>
	<source srcset="small.avif" type="image/avif" media="(max-width:960px)">
    <source srcset="large.avif" type="image/avif">
  	<source srcset="small.webp" type="image/webp" media="(max-width:960px)">
    <source srcset="large.webp" type="image/webp">
  	<source srcset="small.jpg" media="(max-width:960px)">
  	<img src="large.jpg" alt>
</picture>

参考資料:lazy loadingのすべての内容