AVIF vs WebP
どちらも写真を保存できますが、トレードオフが異なります。実際の違いと、選び方をまとめました。
Short answer
圧縮は AVIF が上、対応範囲の広さとエンコードの速さは WebP が上。フォールバック付きで両方配信するサイトなら、AVIF を先に、WebP を次善として置きます。
Why this comes up
このサイトで唯一、双方が本当に現代的で、結論も僅差になる比較です。HEIC のように追い込まれてここに来る人はいません。あなたは**選んで**います。たいていはウェブサイトのために、たいていは性能診断に「JPEG の配信をやめろ」と言われて。面白いのは、答えが単純に「新しいほう」ではないところです。
項目別の比較
| 項目 | AVIF | WebP |
|---|---|---|
| 圧縮方式 | 非可逆 | 非可逆 |
| 透過 | 対応 | 対応 |
| 一般的なファイルサイズ | 同等の JPEG のおよそ 40-55% | 同等の JPEG のおよそ 65-75% |
| 互換性 | 現行の全ブラウザが対応。一部の古いデスクトップアプリは未対応 | 現行のすべてのブラウザとほとんどのアプリが対応 |
| 主な入手元 | ページ容量を最適化しているウェブサイト | ページ容量を最適化しているウェブサイト |
What actually differs
AVIF は明確に小さい。ただしすべての画像でではない
同等の見た目で AVIF はおおむね WebP より 20〜30% 小さく、差が最も開くのは空・肌・ボケのような滑らかなグラデーションを含む写真です。その変換は広い平坦面をバンディングなしで扱えます。一方、アイコンや UI スプライトのような小さく鋭く平坦な素材では優位はほぼ消え、WebP が勝つこともあります。
エンコード負荷は一桁違う
AVIF のエンコードは遅く、同じ画像で WebP の 10 倍以上の CPU 時間を要することもよくあります。ブラウザー上のツールでは、それがそのまま待ち時間になります。数千点を処理するビルドパイプラインでは実費の項目になります。WebP のエンコーダーは成熟していて速く、それが今も遍在している大きな理由です。
互換性の下限は「古いブラウザー」ではなく Safari 15
WebP は 2020 年以降すべての主要ブラウザーに入っています。AVIF は後発で、実際の下限は Safari です。デスクトップ Safari は 16、iOS も 16 で対応しました。解析にまだ iOS 15 が無視できない割合で出ているなら、そこがフォールバックを配る相手です。2026 年時点で多くの読者層ではその割合は小さいものの、「小さい」は仮定せず**調べるべき数字**です。
Which to use
Use AVIF for
バイト数が最も効く写真コンテンツ。ヒーロー画像、ギャラリー、25% の節約が数百 KB になるだけの大きさがあるもの。
Use WebP for
広い互換性が要る配信、エンコード時間が予算になるビルドパイプライン、そして AVIF の優位が現れない小さな平坦な UI 素材。
One thing that catches people out
「同じ品質の数値」で容量を比べても意味がない
AVIF エンコーダーの品質 80 と WebP エンコーダーの品質 80 は、互いに無関係な目盛りです。両方を 80 に設定して容量を報告するベンチマークが測っているのは、圧縮効率ではなくエンコーダーの既定値です。公平な比較は見た目の品質を揃えたうえでのみ成立し、それには知覚指標か、実際の画像を見るあなたの目が要ります。