Webサイトの表示速度を上げるには、画像のデータ容量を削減することが不可欠です。古くから使われてきたJPGやPNGは、現在、次世代の画像フォーマットであるWebPやAVIFに置き換わりつつあります。これらのフォーマットは卓越した圧縮率を誇り、Webの高速化に貢献します。
WebP：Webのモダンスタンダード
WebPはGoogleが2010年に発表したフォーマットで、JPGより約25〜34%、PNGより約26%軽量です。可逆圧縮・非可逆圧縮、透過表示（アルファチャネル）、アニメーションのすべてに対応しており、ほぼすべての主要ブラウザで動作するため、現在のWeb画像最適化の標準となっています。
AVIF：究極の圧縮率
AVIFは、AOMediaが開発したAV1ビデオコーデック技術に基づくフォーマットで、WebPからさらに平均20〜30%もの容量削減を実現します。ディテールの細部表現に優れ、HDR（ハイダイナミックレンジ）カラーや10ビット/12ビットの色深度もサポートしているため、高精細な画像表示に最も適しています。
どちらを使用すべきか
使い分けの目安は次の通りです。
- 一般的なWebサービス: 多くのデバイスでの互換性を重視する場合は、WebPをデフォルトにするのが安全です。
- 極限までのデータ削減: 最新環境のユーザーが多く、転送量を限界まで削りたい場合はAVIFを選定します。
- ハイブリッド対応: HTMLの<picture>タグを利用して、AVIFを最優先で読み込ませ、未対応ブラウザにはWebPやJPGを適用する書き方が推奨されます。