画像圧縮ベンチマーク 2024 - JPEG, WebP, AVIF 実測比較
ベンチマーク手法 - 公平な比較のための条件設定
画像圧縮フォーマットの比較は、条件設定を誤ると意味のない結果になります。「AVIF は JPEG より 50% 小さい」という主張は、品質設定や画像の種類によって大きく変動するためです。本ベンチマークでは、以下の条件で公平な比較を行います。
比較基準: 同一視覚品質での比較 - 各フォーマットの品質パラメータ (JPEG の quality、WebP の quality、AVIF の CRF) を調整し、SSIM (Structural Similarity Index) が同一になるようにエンコードします。SSIM 0.95 を基準とし、各フォーマットでこの品質を達成する最小ファイルサイズを比較します。
テスト画像セット: 5 カテゴリ × 各 20 枚 = 合計 100 枚の画像を使用します。(1) 写真 (風景、ポートレート、食品)、(2) イラスト/グラフィック (フラットデザイン、グラデーション)、(3) スクリーンショット (テキスト主体、UI)、(4) 透過画像 (商品写真、アイコン)、(5) 高周波画像 (テクスチャ、細かいパターン)。
エンコーダ: JPEG は libjpeg-turbo 3.0、WebP は libwebp 1.3.2、AVIF は libavif 1.0.4 (aom エンコーダ) を使用。すべて 2024 年時点の最新安定版です。
エンコード設定: JPEG - 品質 60-95 の範囲で SSIM 0.95 を達成する値を探索。WebP - 品質 50-90 の範囲。AVIF - CRF 20-45 の範囲、Speed 6。各画像に対して二分探索で最適な品質値を決定し、SSIM 0.950±0.002 の範囲に収めます。
この手法により、「同じ見た目の品質で、どのフォーマットが最も小さいファイルを生成するか」を客観的に比較できます。
写真カテゴリの結果 - AVIF の圧倒的優位性
写真 (自然画像) は画像圧縮フォーマットが最も得意とするカテゴリです。連続的なトーンとグラデーションが多く、周波数変換ベースの圧縮が効果的に機能します。
結果サマリー (SSIM 0.95 基準、20 枚の中央値):
- JPEG (libjpeg-turbo): 基準サイズ 100% (品質 78-82 で達成)
- WebP (libwebp): JPEG 比 68% (32% 削減、品質 72-76 で達成)
- AVIF (aom): JPEG 比 48% (52% 削減、CRF 28-32 で達成)
AVIF は JPEG の半分以下のファイルサイズで同等の視覚品質を実現しています。WebP も JPEG より 30% 以上小さいですが、AVIF との差は明確です。
画像サイズ別の傾向: 解像度が高い画像ほど AVIF の優位性が拡大します。4,000 px 幅の画像では AVIF は JPEG 比 45% まで縮小しますが、400px 幅のサムネイルでは 55% 程度にとどまります。これは AVIF のブロックサイズ (最大 64x64) が大きな画像でより効率的に機能するためです。
コンテンツ別の傾向: 風景写真 (空のグラデーション、遠景のディテール) では AVIF が特に強く、JPEG 比 42% を記録しました。一方、テクスチャの多いクローズアップ写真 (布地、木目) では JPEG 比 55% と、優位性がやや縮小します。ポートレートでは JPEG 比 47% で、肌のグラデーション表現で AVIF の予測モデルが効果的に機能しています。
エンコード時間の比較: JPEG 1x (基準)、WebP 3-5x、AVIF 15-25x (Speed 6)。AVIF のエンコード時間は明確なデメリットですが、ビルド時の一括処理であれば許容範囲です。
イラスト・スクリーンショットカテゴリの結果
イラストやスクリーンショットは、写真とは異なる特性を持ちます。シャープなエッジ、均一な色面、テキストなど、高周波成分と低周波成分が混在するコンテンツです。
イラスト/グラフィック (SSIM 0.95 基準、20 枚の中央値):
- JPEG: 基準サイズ 100% (品質 85-90 で達成。エッジのリンギングを抑えるため高品質が必要)
- WebP: JPEG 比 55% (45% 削減)
- AVIF: JPEG 比 38% (62% 削減)
イラストカテゴリでは AVIF の優位性がさらに拡大します。JPEG はブロック境界でのアーティファクト (ブロックノイズ) が目立ちやすく、SSIM 0.95 を達成するために高い品質設定が必要です。一方、AVIF の大きなブロックサイズと高度な予測モデルにより、均一な色面を極めて効率的に圧縮できます。
スクリーンショット (SSIM 0.95 基準、20 枚の中央値):
- JPEG: 基準サイズ 100% (品質 88-92 で達成)
- WebP: JPEG 比 42% (58% 削減)
- AVIF: JPEG 比 30% (70% 削減)
スクリーンショットは AVIF が最も得意とするカテゴリです。テキストの鮮明さを維持しながら、背景の均一な色面を極限まで圧縮できます。JPEG 比 70% の削減は驚異的な数値です。
重要な注意点: イラストやスクリーンショットで可逆圧縮 (ロスレス) が必要な場合、PNG が依然として最も互換性の高い選択肢です。WebP ロスレスは PNG より 26% 小さく、AVIF ロスレスはさらに 10-15% 小さいですが、ブラウザ対応率を考慮すると PNG + WebP のフォールバックが安全です。
透過画像と高周波画像の結果
透過 (アルファチャンネル) を含む画像と、テクスチャなど高周波成分が多い画像は、フォーマット選択に特に注意が必要なカテゴリです。
透過画像 (SSIM 0.95 基準、アルファ含む、20 枚の中央値):
- PNG (可逆): 基準サイズ 100%
- WebP (非可逆 + アルファ): PNG 比 18% (82% 削減)
- AVIF (非可逆 + アルファ): PNG 比 12% (88% 削減)
透過画像では、PNG からの移行効果が劇的です。EC サイトの商品画像 (白背景を透過にしたもの) で、1 枚あたり 500KB の PNG が WebP で 90KB、AVIF で 60KB になるケースが典型的です。100 枚の商品画像があるページでは、50MB → 6MB (AVIF) という転送量の削減が実現します。
高周波画像 (テクスチャ、細かいパターン、SSIM 0.95 基準):
- JPEG: 基準サイズ 100% (品質 82-88 で達成)
- WebP: JPEG 比 75% (25% 削減)
- AVIF: JPEG 比 58% (42% 削減)
高周波画像は全フォーマットにとって「難しい」カテゴリです。細かいパターンやテクスチャは予測が困難で、圧縮効率が低下します。それでも AVIF は JPEG 比 42% の削減を達成しており、他カテゴリほどではないものの明確な優位性があります。
特筆すべき発見: 高周波画像で AVIF の品質を下げすぎると (CRF 40 以上)、「スミアリング」と呼ばれるディテールの消失が発生します。これは AVIF のデブロッキングフィルターが過度に作用するためで、テクスチャ写真では CRF 25-30 に抑えることを推奨します。WebP ではこの問題は発生しにくく、テクスチャ保持の観点では WebP が有利な場面もあります。
エンコード速度とデコード速度の比較
ファイルサイズだけでなく、エンコード/デコード速度もフォーマット選択の重要な判断材料です。特にリアルタイム変換やクライアントサイドでのデコード性能は、ユーザー体験に直結します。
エンコード速度 (1,200 × 800 px 写真、同一品質基準):
- JPEG (libjpeg-turbo): 15ms (基準 1x)
- WebP (libwebp, method 4): 65ms (4.3x)
- AVIF (aom, speed 6): 280ms (18.7x)
- AVIF (aom, speed 4): 850ms (56.7x)
- AVIF (aom, speed 8): 120ms (8x、ただし圧縮率 10-15% 低下)
AVIF のエンコードは JPEG の 20 倍近い時間がかかります。1000 枚の画像を処理する場合、JPEG なら 15 秒、AVIF (speed 6) なら約 5 分です。CI/CD パイプラインでは許容範囲ですが、ユーザーアップロード時のリアルタイム変換には不向きです。
デコード速度 (ブラウザでの表示速度):
- JPEG: 8ms (基準 1x)
- WebP: 10ms (1.25x)
- AVIF: 18ms (2.25x)
デコード速度では AVIF は JPEG の約 2 倍の時間がかかります。1 枚あたり 10ms の差は無視できますが、画像が 50 枚以上あるページでは累積的な影響が出る可能性があります。ただし、decoding="async" を使用すればメインスレッドへの影響は最小限に抑えられます。
メモリ使用量: デコード時のピークメモリ使用量は AVIF が最も大きく、JPEG の約 1.5 倍です。モバイルデバイスのメモリ制約が厳しい環境 (低価格 Android 端末) では、大量の AVIF 画像を同時にデコードするとメモリ圧迫が発生する可能性があります。
ベンチマーク結果に基づくフォーマット選定ガイドライン
実測データに基づき、画像の種類と用途に応じた最適フォーマットの選定ガイドラインを提示します。
推奨フォーマット選定マトリクス:
- 写真 (Web 配信): AVIF を第一候補、WebP をフォールバック、JPEG を最終フォールバック。picture 要素で 3 段階のフォールバックチェーンを構築。
- イラスト/グラフィック (非可逆で十分): AVIF が最も効率的。特に均一な色面が多いフラットデザインでは JPEG 比 60% 以上の削減が期待できる。
- スクリーンショット: AVIF が圧倒的に有利 (JPEG 比 70% 削減)。テキストの鮮明さを維持しながら極限まで圧縮可能。
- 透過画像: WebP または AVIF。PNG からの移行で 80-88% のサイズ削減。EC サイトの商品画像では最優先で対応すべき。
- テクスチャ/高周波画像: AVIF (CRF 25-30 に制限) または WebP。AVIF の過度な圧縮によるスミアリングに注意。
- アニメーション: WebP アニメーションまたは MP4。AVIF アニメーションはブラウザ対応がまだ不十分。
コスト対効果の判断: AVIF の導入コスト (ビルドパイプラインの変更、エンコード時間の増加、フォールバック管理) を考慮すると、以下の優先順位で移行するのが効率的です。(1) 透過画像 (PNG → WebP/AVIF で最大の削減効果)、(2) ヒーロー画像/LCP 画像 (LCP 改善に直結)、(3) 写真全般 (量が多いため累積効果が大きい)、(4) イラスト/スクリーンショット (既に WebP で十分な場合は優先度低)。
最終的な判断は、自サイトの画像構成とユーザーのブラウザ分布に基づいて行ってください。AVIF 対応率が 90% を超えるユーザーベースであれば、全面的な AVIF 移行が正当化されます。