【SEO】画像をAVIFに！メモ

自分用のメモとして残します。

Squoosh is the ultimate image optimizer that allows you to compress and compare images with different codecs in your bro...

上記サイトはGoogleが提供している、ブラウザ上で画像を圧縮できるサイト。

画像の容量が大きいと表示に時間がかかり、ユーザーが離脱してしまう。

簡単に言うと、AVIFはあまり画質をそこなわずに圧縮してくれるものである。

Webpが主流であったが、最近はAVIFが主流となりつつある。

対応していないものもあるため、書き方は下記のように表示されない場合の対処も書いておく。

<picture>
  <!--AVIFが表示可能であれば .avifを表示-->
  <source srcset="images/example.avif" type="image/avif">
  <!--Webpが表示可能であれば .webpを表示-->
  <source srcset="images/example.webp" type="image/webp">
  <!--どちらも表示できなければ.jpgを表示-->
  <img src="images/example.jpg" alt="">
</picture>

コメント