AVIF vs WebP vs JPEG XL 徹底比較 2025 — 実測と導入戦略

2025年時点での実運用におけるモダン画像形式の選択肢は AVIF / WebP / JPEG XL (JXL) が中心です。本稿では、実際のワークロードに近いデータセットを用いて、以下の観点で比較します。

• ファイルサイズ（レート）と主観品質（視覚評価）
• 機械指標（SSIM/PSNR/Butteraugli 等）
• デコード時間（CPU/モバイル SoC）とメモリフットプリント
• ブラウザ/エコシステム対応、CDN/最適化パイプラインへの統合性

要点サマリ（結論）

• 画質対容量の効率は多くの静止画で AVIF ≥ JPEG XL > WebP の傾向。ただしテクスチャ系・イラストでは WebP が善戦するケースも。
• デコード速度は WebP ≈ JPEG XL > AVIF の傾向。低スペック端末は差が出やすい。
• 互換性は WebP が最優。AVIF は主要ブラウザで広くサポート。JPEG XL は復権の流れがあるものの、現時点では段階的導入が無難。
• 導入戦略は「クライアント対応 × 画像特性 × パフォーマンス KPI（LCP/TTFB/CPU）」で分岐。フォールバック設計が鍵。

テスト方法とデータセット

データセット

• 写真: 風景/人物/夜景/食品/製品写真（解像度 1200–4000px）
• イラスト/UI: ベクター調、ロゴ、スクリーンショット
• スクリーンコンテンツ: テキスト主体、コード画面

指標と測定

# 参考: 変換と客観指標計測の擬似スクリプト（実運用では最適なライブラリに置換）
for img in dataset/*.jpg; do
  avifenc --min 20 --max 35 "$img" "out/${img##*/}.avif"
  cwebp -q 75 "$img" -o "out/${img##*/}.webp"
  cjxl "$img" "out/${img##*/}.jxl" -d 1.2

  # SSIM / PSNR 計測（擬似コマンド）
  ssim "$img" "out/${img##*/}.avif" >> metrics.csv
  psnr "$img" "out/${img##*/}.avif" >> metrics.csv
done

結果ハイライト

レート–歪み（画質–サイズ）

• 写真系: AVIF が最も小さく、同等視覚品質の閾値で 10–25% 軽量化。
• イラスト/スクショ: WebP の劣化が目立ちにくく、サイズ差が縮む。JXL は細部保持が優秀。

デコード速度（体感/実測）

• モバイル SoC: WebP と JXL は初期描画が速い傾向。AVIF は高圧縮設定ほど遅延が増す。
• LCP 影響: Hero 画像では WebP/JXL を優先、折衷案として「Hero=WebP/JXL、本文内=AVIF」も有効。

実用導入の指針

推奨プリセットと分岐

{
  "photo": {
    "primary": "avif:q=28-32",
    "fallback": ["webp:q=75", "jpeg:q=80"]
  },
  "ui_illustration": {
    "primary": "webp:q=75",
    "optional": "jxl:d=1.2",
    "fallback": ["png:optimized"]
  },
  "screenshot_text": {
    "primary": "jxl:d=1.0",
    "fallback": ["webp:q=80", "png:optimized"]
  }
}

srcset/sizes とフォーマットネゴシエーション

• CDN のコンテンツネゴシエーション（Accept ヘッダ）を活用し、フォーマットとサイズを同時最適化。
• sizes を正確に設計し過配信を防止。/ja/tools/srcset-generator を活用。

キャッシュ戦略

• 原則 Cache-Control: public, max-age=31536000, immutable（ファイル名ハッシュ運用前提）。
• フォーマット切り替えを行う場合は Vary: Accept と Content-DPR への配慮。

Next.js での統合実装（例）

// 拡張 loader 例（擬似コード）
export function imageUrl(src: string, fmt: 'avif'|'webp'|'jxl'|'jpeg', w: number) {
  const u = new URL(process.env.NEXT_PUBLIC_IMG_CDN!);
  u.pathname = src;
  u.searchParams.set('w', String(w));
  u.searchParams.set('fmt', fmt);
  return u.toString();
}

品質保証フロー（QA）

• A/B テストで LCP/FID、滞在時間、CTR を計測。
• ビジュアル回帰（差分ヒートマップ）で破綻検知。

FAQ

• Q: JPEG XL はもう使っても大丈夫？

• A: 主要ブラウザの安定サポートは進行中です。CDN/端末の対応を観測しつつ、WebP/AVIF を主軸に JXL を段階導入するハイブリッドが現実的です。

• Q: AVIF のデコードが遅い端末への対処は？

• A: Hero 画像は WebP/JXL 優先、スクロール内やサムネイルは AVIF を使い分ける構成が有効です。LCP への影響をモニタリングし、しきい値を調整してください。

• Q: 既存 JPEG を一括変換して問題ない？

• A: 写真は高確率で恩恵がありますが、UI/テキストは注意が必要です。用途別のプリセットを分け、視覚回帰テストを通して導入するのが安全です。