WebP vs AVIF: エンコーディング、圧縮、ブラウザサポート

WebPはVP8のイントラエンコーディングを使用しており、予測残差符号化を基礎としています。画像を16x16の輝度ブロックと対応する色差ブロックに分割し、4種類のイントラ予測モードのみを提供し、エンコーディング処理が比較的単純で計算量の複雑さが低いです。

AVIFはAV1のイントラエンコーディングを使用し、4x4から64x64までの可変サイズブロック分割に対応し、最大56方向のイントラ予測方向を提供し、角度予測や方向別予測といった新しいモードを追加しているため、画像の局所的なテクスチャ詳細をより正確に適合できます。

VP8のイントラエンコーディングはループ内フィルタリングの最適化を使用しません。AV1のイントラエンコーディングはループ内デブロッキングフィルタリングとノイズ低減を追加しており、圧縮によるブロックノイズや輪郭の歪みを低減できるため、同じビットレートでより滑らかな主観画質が得られます。

国内CDNベンダーによる公開測定データによると、同じ主観画質の場合、AVIFのファイルサイズはWebPと比較して15%から30%小さくなります。自然な写真画像における圧縮率の改善幅は、ベクター画像やグラフィック画像よりも大きくなります。

WebPのファイルサイズは従来のJPEGと比較して25%から35%小さくなります。AVIFは高精細写真や大サイズ画像のシナリオでより明確な圧縮率の優位性を持ちます。低品質プレビューのシナリオでは、両者の圧縮率の差は10%未満に縮小します。

現在の公開テスト結果では、同等画質でAVIFのファイルサイズがWebPより大きくなったケースは記録されていません。ベタ塗りのブロックが面積の80%以上を占めるグラフィック画像においてのみ、両者の圧縮率の差は5%未満となります。

両フォーマットはアルファチャネルとアニメーションに対応していますが、詳細な実装に違いがあります。WebPは8ビットアルファ透過に対応している一方、AV1は10ビットと12ビットのアルファ透過に対応しているため、透過のグラデーションがより滑らかになります。

HDRサポートについては、WebPは静的HDRの基本的な保存にのみ対応しており、PQおよびHLGの完全なデコード適応は広く実装されていません。AVIFはネイティブで10ビット色深度、HDR10およびワイドカラーガマットに対応し、現在のワイドガマット表示デバイスに適合しています。

アニメーションサポートについては、WebPは1フレームあたりのエンコーディングの複雑さが低く、再生時のデコードリソース使用量はAVIFのアニメーションよりも低いです。同等画質におけるAVIFアニメーションのファイルサイズは、WebPアニメーションと比較して約20%小さくなります。

2024年時点で、WebPのグローバルなブラウザサポートカバー率は96%を超えており、大部分の主流ブラウザバージョンでWebP画像を正常に解析・表示できます。

AVIFのブラウザサポートカバー率は約84%で、WebPより低くなっています。古いmacOSおよびiOSデバイスで16.4より古いバージョンのSafariを実行している場合、AVIF画像を正常に表示できません。

EC商品の大型画像やマーケティングバナーのシナリオでは、AVIFを優先しWebPのフォールバックソリューションを組み合わせてください。これによりストレージと帯域幅のコストを削減しつつ、古いブラウザのユーザーをカバーでき、高トラフィックシナリオのコスト制御が確保されます。

商品リストのサムネイルや商品詳細ページのアイコンのシナリオでは、WebPで十分に要件を満たせます。このシナリオでは個々の画像サイズが既に小さく、圧縮率改善による恩恵が限定的であり、WebPはデコード速度が速いためです。

商品表示用アニメーション画像や広告用アニメーション画像の場合、帯域幅を優先し互換性要件が低い場合はAVIFを選択し、広範なカバー率と高いデコード性能が必要な場合はWebPを選択してください。事前変換のフォーマットテストを実施するにはOKfmtのWebP to AVIFコンバーターを利用できます。