2025年版 次世代画像フォーマット選定ガイド（AVIF / WebP / PNG / JPEG）
形式選定は “万能を探さず用途で割り切る” と設計が速くなります。AVIF は写真と透明を高効率にまとめられる一方、デコードコスト と 生成時間 がトレードオフです。WebP はバランスとエコシステム成熟、PNG は 可逆+ピクセル完全性、JPEG は 極端に軽い LQ 生成 や 一括既存資産 の互換性で依然価値があります。
ここでの判断表は当サイトのツール（/compressor / /convert) の内部チューニング方針にも反映しています。
TL;DR
- 写真+透明= AVIF + WebP fallback
- UI/アイコン = PNG (一部 SVG)
- 初期移行は LCP / 体積上位20% から
1. 形式別クイック結論
- ヒーロー/LCP写真: AVIF (Fallback: WebP → JPEG)
- 複雑な透明PNGの軽量化: AVIF lossless か 高品質WebP → 劣化許容なら AVIF lossy
- UIアイコン/ピクセルパーフェクト: PNG（スプライト化 + immutable キャッシュ）
- スクリーンショット: WebP（テキストクリスプ + サイズバランス） / ドキュ用途は PNG
- アニメーション: MP4/WEBM（APNG/GIF 置換）
2. 判断フロー（Decision Tree）
- 動くか？ → 動く: 動画/WEBM。静止: 次へ
- 透過が必要か？ → はい: AVIF / WebP / PNG を品質と生成レイテンシで比較
- ピクセル単位の視認精度要求 (UI/ピクセルアート) か？ → はい: PNG
- 写真/複雑グラデか？ → AVIF → 互換不足端末 fallback WebP/JPEG
- テキスト/コード/表か？ → WebP（PNG差分が小ならPNG維持判断）
3. 実装スニペット（picture）
<picture> <source srcSet="hero.avif" type="image/avif" /> <source srcSet="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="製品利用シーン" width="1200" height="630" loading="eager" decoding="async" /> </picture>
4. キャッシュ/配信戦略
immutability を担保するため content-hash 付きファイル名で Cache-Control: public, max-age=31536000, immutable。フォーマット差分はビルド時に生成し <picture> で出し分け。AVIF 生成が遅い大量バッチはワーカー/キューで非同期最適化し WebP を先行配信 → 再訪時に差し替えが実用的です。
5. 評価指標セット
- 圧縮率: 原寸 JPEG 基準 bytes 削減率 (中央値目標 AVIF: 45% / WebP: 30%)
- デコード時間: mid-tier デバイス (Moto G / Aシリーズ) で LCP 候補 decode P95 < 90ms
- 生成時間: AVIF effort4 P95 < 1.2s (4K) 超過は非同期化
- 視覚品質: SSIM ≥0.985 / テキスト含む領域 edge-PSNR 監視
- 回帰検知: bytes +6% / SSIM -0.004 / decode +15% でアラート
6. サンプルベンチ (概念値)
| Case | JPEG | WebP | AVIF |
|------|------|------|------|
| 写真 1600w | 240KB | 168KB (-30%) | 130KB (-46%) |
| 透明UI 2x | 120KB (PNG) | 84KB (-30%) | 66KB (-45%) |
| スクリーンショット | 310KB | 210KB (-32%) | 205KB (-34%) |実測は被写体/ノイズ/カラープロファイルで変動。WebP と AVIF の差が 5% 未満なら生成レイテンシで選好。
7. 段階移行戦略
- インベントリ分析: 体積上位 20% 画像で LCP/総転送影響を算出。
- パイロット: LCP 画像 10 枚を AVIF + WebP fallback 化 → CWV 差分測定。
- 自動生成: 既存 CI に AVIF 追加 (失敗時 WebP 維持)。
- フル展開: スクリーンショット領域は差分 5% 未満なら WebP 止まり判断。
8. フォールバック最適化
HTML レンダリング時に Accept ヘッダを判別しない静的環境では <picture> が中核。SSR でクライアントヒント (DPR, Width) を活用するなら srcset生成 を組み合わせる。低速回線では Preload 量を抑え HTTP 競合を減らす。
9. トラブルシュート
- AVIF 遅い: effort を 4 に固定 / 大画像は先に WebP 返し後日再生成。
- テキストにじみ: chroma subsampling を 4:4:4 に / WebP fallback を優先。
- サイズ差小: AVIF と WebP 差 <5% → 運用コスト優先で WebP に統一。
- 色ズレ: ICC プロファイル抜け → 生成パイプで
toColourspace('srgb')を強制。
Version: 2025-09-08 初版 + 評価指標/段階移行節追加。