AVIFとWebPの違い
圧縮率・品質・対応ブラウザを徹底比較

AVIFとWebPの基本情報

WebPはGoogleが2010年に発表した画像フォーマットだ。VP8ビデオコーデックの技術をベースにしており、非可逆（lossy）と可逆（lossless）の両方をサポートする。2023年にSafariが対応したことで、主要ブラウザ全てで使えるようになった。

AVIFはAlliance for Open Media（AOM）が策定したAV1ビデオコーデックをベースにした画像フォーマットだ。2020年にChromeが対応を開始し、2023年にSafari 16.4が対応。2026年現在、Chrome・Firefox・Safari・Edgeの全主要ブラウザで利用可能になっている。

5つの比較軸で見る違い

1. 圧縮率（ファイルサイズの削減幅）

同一品質での比較では、AVIFはWebPより平均20〜30%小さいファイルを生成する。特に写真やグラデーションの多い画像でAVIFの優位性が際立つ。一方、テキストやイラストなどエッジのシャープな画像では差が縮まる傾向にある。

2. 画質（圧縮後のビジュアル品質）

AVIFは低ビットレートでの品質維持に優れている。高い圧縮率でもブロックノイズが出にくく、グラデーション部分の滑らかさが保たれる。WebPは低品質設定にするとブロックアーティファクトが目立つ場合がある。ただし中〜高品質設定では両者の差は肉眼でほぼ判別できない。

3. エンコード速度

ここがAVIFの最大の弱点だ。AVIFのエンコードはWebPの5〜10倍の時間がかかる。1枚の画像であれば体感差は小さいが、100枚以上をバッチ処理する場合は無視できない差になる。デコード（表示）速度はどちらもブラウザ側の最適化が進んでおり、体感差はほぼない。

4. ブラウザ対応状況（2026年3月時点）

2026年現在、AVIFとWebPの両方がChrome・Firefox・Safari・Edgeで対応済みだ。Can I UseによるAVIFのグローバル対応率は約95%、WebPは約97%。差は縮まっているが、古いiOSデバイスやSamsung Internet旧バージョンではAVIF非対応のケースが残る。万全を期すならpictureタグでフォールバックを設定する。

5. 機能面の違い

AVIFは10bit/12bitの色深度、HDR、ワイドカラーガマットに対応しており、写真やリッチなビジュアルでの表現力が高い。WebPは8bitまでの対応だ。アニメーションはどちらもサポートしているが、AVIFアニメーションの対応はまだ限定的だ。透過（アルファチャンネル）はどちらも対応している。

用途別の使い分け

AVIFを優先すべきケース

• ヒーローイメージ・メインビジュアル: LCPに直結する重要な画像は、最大限の圧縮率が得られるAVIFで配信する
• 写真ギャラリー・ポートフォリオ: 写真の多いサイトではAVIFの圧縮率の優位性が積み重なり、総転送量を大幅に削減できる
• 高品質が求められるビジュアル: 低ビットレートでも品質を維持するAVIFの特性を活かせる

WebPを優先すべきケース

• 大量の画像を一括変換: エンコード速度がAVIFの5〜10倍速いため、バッチ処理の効率が圧倒的に高い
• CMS（WordPress等）での運用: WebP対応のプラグインが充実しており、運用が容易
• アニメーション画像: WebPアニメーションのほうがブラウザ対応が安定している

両方を生成する（推奨）

最も効果的な戦略は、同じ画像をAVIF・WebP・JPEG（またはPNG）の3フォーマットで用意し、pictureタグでブラウザに最適なフォーマットを選ばせることだ。ビルドツールやCDNの画像変換機能を使えば自動化できる。

pictureタグでのフォールバック実装

pictureタグを使うと、ブラウザが対応しているフォーマットを自動的に選択して表示する。AVIF → WebP → JPEG/PNGの順にsource要素を記述する。ブラウザは上から順に評価し、最初に対応しているフォーマットを読み込む。

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="説明文" width="800" height="600"
       loading="lazy" decoding="async">
</picture>

レスポンシブ対応が必要な場合は、sizes属性とsrcset属性を組み合わせる。

<picture>
  <source srcset="image-400.avif 400w, image-800.avif 800w, image-1200.avif 1200w"
          sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
          type="image/avif">
  <source srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
          sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
          type="image/webp">
  <img src="image-800.jpg" alt="説明文" width="800" height="600"
       loading="lazy" decoding="async">
</picture>