AVIFの普及でWebPはもういらないかもしれない

結論から伝えますと、現在の画像フォーマットの指定は主にAVIFでフォールバックにビルド元のJPEGかPNGで問題ないと思います。（ただし後述する懸念点あり）

Astroを利用している方ならPictureコンポーネントを次のような指定にするといいでしょう。この指定の場合はAVIFのみ生成されて、フォールバックに圧縮されたJPEGかPNGが指定されます。

<Picture
  formats={['avif']}
  src={src}
  alt={alt}
  widths={widths}
  sizes={sizes}
  loading={loading}
  fetchpriority={loading === 'eager' ? 'high' : null}
  decoding="async"
/>

AVIFは2024年現在すべてのモダンブラウザでサポート済み

AVIFはAV1ビデオ圧縮標準を基に開発された次世代の画像形式です。

ChromeとFirefoxが早期に導入し、Safariでも2022年に導入されました。Microsoft Edgeのみ長らく非対応の状況が続いていましたが、今年（2024年）の1月にようやく導入されてすべてのモダンブラウザで利用が可能となりました。

参考：“AVIF” | Can I use… Support tables for HTML5, CSS3, etc

AVIFはWebPを超える驚きの圧縮率

AVIFを導入するメリットはその圧縮率にあります。

一般的にWebPはJPEGに比べて同画質で約25%～35%小さなファイルサイズにまで圧縮できますが、AVIFはWebPに比べてさらに10%～30%程度もファイルサイズを小さくすることが可能となります。

原則的にWebサイトで使用する画像はサイズが小さければ小さいほどいいので、後述する懸念点さえクリアできればAVIF一択ではないかなと思ってます。

ビルドに時間がかかるのが懸念点

問題点として、AVIFのエンコードとデコードは、WebPのそれよりも時間がかかります。体感によればJPEGやPNGをAVIFに生成する時間は、WebPに生成する時間よりも2倍以上は長くなりました。

そのため、画像の量が多いWebサイトだったり、早急にビルドを終わらせないといけないような現場では取り入れられない可能性があります。その場合はWebPを利用するといいでしょう。

ビルドの時間にさえ目をつむれば画像のサイズをかなり抑えることができるので積極的に導入していきたいですね。

ご利用は計画的に。