AVIFとWebPの使い分け（比較・導入・フォールバックの完全ガイド）

「全部AVIFにすれば最強？」――答えはケースバイケースです。AVIFは高効率ですが、エンコードの重さや運用コスト、フォールバックの手当など考える要素が増えます。そこで本稿は、日々の制作/運用で迷わない現実解：“既定はWebP、要所だけAVIF”という使い分けを、比較と導入フローで解説します。

関連：設定値の起点と破綻対策

AVIFのパラメータ早見は AVIF設定チートシート、画質破綻（にじみ/リング/バンディング）の対策は対策集を参照してください。

要点（TL;DR）

既定はWebP 80–85%、ロゴ/透過はPNG or WebP Lossless。
AVIFはLCPに効くヒーローや、高精細・グラデ主体の要所に限定。
picture要素で AVIF → WebP → JPEG/PNG の順に提供。width/heightは必ず指定。
比較は /compressor で書き出し、 /compare で1:1確認。

1. 比較軸：容量・画質・速度・互換

軸	AVIF	WebP
容量/画質	同画質で小さくなる傾向。グラデ/肌で有利な場面あり。	良好。多くの案件で十分なバランス。
エンコード速度	重い（探索が深い）。CI/CD時間に影響しやすい。	速い。量産や更新頻度の高いサイトに向く。
互換性	主要ブラウザで対応。古環境はフォールバック考慮。	主要ブラウザで広く対応。提出/共有も通しやすい。
機能/特性	10bit/4:4:4等の表現力。高画質追求に◎。	アニメ/透明の実務実績が豊富。運用しやすい。

2. 判断フロー（5分で決める）

解像度を統一：本文は1200–1600px、一覧は600–800px。密度差は /srcset で吸収。
既定=WebPで全体最適：写真はWebP 80–85%、ロゴ/透過はPNG / WebP Lossless。
要所だけAVIFを試験：ヒーローやLPのキービジュアルをAVIF化し、容量/画質/生成時間の差分を記録。
差が小さければWebP継続、効果が大なら部分的にAVIF採用。
フォールバックを用意：pictureでAVIF/WebP/JPEGを連鎖。imgにwidth/height必須。

3. 実装：picture要素（AVIF→WebP→JPEG）

<picture>
  <source type="image/avif" srcset="/img/hero-800.avif 800w, /img/hero-1600.avif 1600w" sizes="(max-width: 800px) 100vw, 800px" />
  <source type="image/webp" srcset="/img/hero-800.webp 800w, /img/hero-1600.webp 1600w" sizes="(max-width: 800px) 100vw, 800px" />
  <img
    src="/img/hero-800.jpg"
    srcSet="/img/hero-800.jpg 800w, /img/hero-1600.jpg 1600w"
    sizes="(max-width: 800px) 100vw, 800px"
    width="800" height="450"  /* ← CLS対策 */
    loading="eager" decoding="async" alt="..." />
</picture>

書き出し・比較は /compressor、仕上げの視覚確認は /compare が最短です。

にじみ/リングが出るときは

破綻対策とシャープ/ノイズの順序を併用すると安定します。

4. 用途別レシピ

LPのヒーロー（最大効果点）

AVIF 80–85% / 横1600px。差が小さければWebP。A/BでLCP/CTRを監視。

ブログ本文・記事一覧

WebP 80–85%。滲む箇所は85–90% or 可逆部分差し替え。

ロゴ/透過/アイコン

PNG / WebP Lossless。白縁はマット/デフリンジで回避。

5. よくある落とし穴と回避策

全面AVIFでビルド時間が悪化 → 要所だけAVIF・その他はWebP。
縁のにじみ/逆光のリング → 対策レシピを適用。
互換要件を見落とし → JPEG/PNGを提出用フォールバックとして同梱。

6. 公開前チェックリスト（10項目）

本文1200–1600px／一覧600–800pxに統一。
既定はWebP 80–85%、滲み箇所は+5または可逆に。
ヒーロー等の要所のみAVIFで差分確認。
pictureで AVIF→WebP→JPEG/PNG の順に提供。
imgにwidth/height（or aspect-ratio）を指定。
srcset/sizes を設計。
/compare で1:1の視覚確認。
提出/共有向けのJPEG/PNGを用意。
破綻が見える箇所は前処理/後処理も検討。
OG/サムネは OGPテンプレに沿って作成。

7. まとめ：WebPで“面”、AVIFで“点”を攻める

まずはWebPで全体を最適化し、LCPに効く要所だけAVIFを試す――この順番が、品質と生産性の両立に効きます。書き出しは /compressor、見え方の確定は /compare が最短です。