JPEGとPNGの次の座を巡り、3つの画像フォーマットが争っています: AVIF、WebP、JPEG XL。いずれも 同じ画質でより小さなファイルを約束し、いずれも実際のブラウザサポートを持ち、いずれも少なくとも 1つの大きな欠点を抱えています。本記事ではベンチマークを再実行しなくても正しい選択ができるよう、 実数値と現実のトレードオフを整理します。
ひと言判定
- 圧縮最強: AVIF。同等の視覚品質でWebPより約20%、JPEGより約50%小さい。
- ブラウザ対応最強: WebP。2020年以降ユニバーサル。
- 技術設計最強: JPEG XL。JPEGからのロスレストランスコード、ワイドカラー、 デコードコストなし。2023年にGoogleがChromeのサポートを外したため足踏み。
- ヒーローはAVIF、それ以外はWebP。
圧縮の数値
Cloudinary、Mozilla、IETFが写真コンテンツで独立にベンチマークを取りました。約5,000枚の テスト画像にわたるコンセンサス:
| フォーマット | vs JPEG | vs WebP |
|---|---|---|
| WebP (ロッシー q80) | 約30%小 | 基準 |
| AVIF (q63) | 約50%小 | 約20%小 |
| JPEG XL (effort 7) | 約55%小 | 約25%小 |
画像ごとのばらつきは大きい — JPEG XLはダイナミックレンジの広い写真で、AVIFは平坦領域と グラデーションで、WebPはコンテナオーバーヘッドが効く極低ビットレートで強い。しかし順序は 安定しています: JPEG XL ≥ AVIF > WebP > JPEG。
ブラウザ対応 — 決定打
ユーザーの半分が壊れた画像アイコンを見るなら圧縮の意味はありません。2026年の各フォーマット:
- WebP: グローバル98%以上。すべてのエバーグリーンブラウザ、画像を描画する すべての近代メールクライアント。例外は古い企業向けOutlook。
- AVIF: グローバル約96%。Chrome、Edge、Firefoxは2021年以降、Safariは16 (2022年9月)以降。古いiOSと一部の特殊ブラウザは未対応。
- JPEG XL: グローバル約25%。Safari (17以降)。Firefoxはフラグ越し。 Chromeは2023年に「関心不足」を理由にサポートを削除しました — 採用を凍結させた 物議の判断。Chromeなしでは既定にはなれません。
エンコード/デコードのコスト
圧縮は実行時に無料ではありません:
- WebP: 両端とも高速。1080p画像のデコードで100msは普通。
- AVIF: エンコードが悪名高く遅い(既定設定で1枚に数秒)。デコードは妥当。
aom-av1のような近代エンコーダで改善されているが、WebPの5〜10倍のエンコード 時間を見込んでください。CIで数千点を変換する場合に効きます。 - JPEG XL: 両端ともWebPと同程度。
色、ビット深度、アニメーション
WebPはチャネルあたり8ビット、sRGB専用。Web用途には十分、写真には限界。
AVIFは10ビット、12ビット、ワイドカラー(Display P3、Rec. 2020)、HDRに対応。写真、デザイン ポートフォリオ、カラーマネージドディスプレイへ流れる画像にとって意味があります。
JPEG XLはさらに先へ: 16ビット、既存JPEGからのロスレストランスコード(JPEG → JPEG XL → JPEG を再エンコード無しで往復可)、漸進デコード。この点が技術的な存在意義 — JPEGの能力の 厳密な上位集合です。
アニメーション: AVIF対応(AV1動画コーデックの拡張)、WebP対応。JPEG XLも対応していますが、 アニメJPEG XLのデコーダを出荷したブラウザはありません。
判断ツリー
- ブランド肝心のヒーロー画像: AVIFを第一、WebPフォールバック、最後の砦 としてJPEG/PNG。
<picture>を使用。200KBの素材での20%削減はページビュー あたり40KBです。 - 一般のWebサイト画像: WebP。エンコード/デコードの話が単純で、ツールが 成熟しており、JPEG/PNG比の節約だけで既に十分です。
- 写真ポートフォリオ: AVIF。ワイドカラーとビット深度が意味を持ち、観客は 近代ブラウザを使います。
- メール: 依然JPEG/PNG。新フォーマットはメールクライアントのカバレッジが ありません。
- JPEG XLに手を伸ばしそうな場面: 代わりにAVIFを。75%のユーザーが デコードできなければ、技術的な優位は意味がありません。
<picture>を使った実践セットアップ
最も安全なパターンは3つすべて配信し、ブラウザに選ばせる:
<picture>
<source type="image/avif" srcset="hero.avif">
<source type="image/webp" srcset="hero.webp">
<img src="hero.jpg" alt="...">
</picture>
ブラウザは上から順に走査し、デコード可能な最初のフォーマットを選んでそのバリアントだけを ダウンロードします。CIで3つのエンコードバリアントを作るオーバーヘッドは実在しますが、 ディスクは安く、エンコードは素材ごとに1回で済みます。
結論
2026年の現実解は ヒーローはAVIF、それ以外はWebP、JPEG/PNGはフォールバックです。JPEG XLは 勝者であってほしかったフォーマット — 大半の指標でAVIFより測定可能に優れています — しかし 主要ブラウザがデコードしないフォーマットはフォーマットではありません。ベンチマーク見出し ではなく、自分のサポートマトリクスで選んでください。