AVIF と JPEG XL の比較：ベンチマーク結果と推奨設定

結論

ウェブ上の有損写真やその他の画像形式に対する AVIF と JPEG XL の性能を要約します。

主要な発見（要約）

• 有損写真の場合：AVIF はほぼ常にファイルサイズが小さくなります。デフォルト設定では、同等の画質で 最高品質の JPEG XL でも AVIF より 15%〜25% 大きい です（最大努力モードでもわずかに 6%〜20% の差）。例外ケースは存在しますが、特定の写真で最良の結果を狙う場合は両方を試す価値があります。
  • F1 カールの画像：JPEG XL が勝る典型案例です。
  • ワスル（Weasel）の画像：JPEG XL が勝る例外ケースです。
• 透明性を含む画像の場合：AVIF が大幅に優れています。libjxl はデフォルト設定で 31%〜44%、最大努力モードでは 61%〜70% ファイルサイズが大きい状態です。

  jixel

  は常に透明データを有損レス（ロスレス）でエンコードするため、そのファイルサイズは AVIF よりも 2 倍から 3 倍 になります。
• スクリーンショットやイラストの場合：AVIF が圧倒的に優れています。デフォルト設定では同等の画質において 30%〜90%、最大努力モードでも 20%〜70% ファイルサイズが大きい状態です。ビット単位での正確さが必須でない限り、有損形式を使用すべきです。
• エンコード・メモリ使用量：AVIF は通常、速度も速く、メモリ消費も少なく済みます。

  jixel

  も速く少ないメモリで動作しますが、生成するファイルサイズが通常大幅に大きいので、総合的には AVIF が優れています。
• デコード速度：AVIF は高速です。JPEG XL は中品質の場合、通常 2〜3 倍かかります が、非常に高い画質になるとこの差は縮まり、Chrome では場合によっては JPEG XL が速いこともあります（例：「People」の画像）。
• 努力レベル（Quality Effort）：
  • AVIF および

    jixel

    に設定を上げる価値があります。
  • libjxl にはありません。高努力モードは大幅に遅く、大量のメモリを消費し、結果がほとんど向上しないか、場合によってはファイルサイズが増大します。
• 4:2:0 モード：デフォルトにするべきではありません。ファイルサイズ削減には役立たず、高品質化も難しくなります（ただし速度は速い）。時間がない場合は 4:4:4 で使い続けましょう。
• 画質設定の信頼性：すべてのエンコーダーにおいて画質設定は信頼できます。単一の画質設定でも画像間で変動しますが、合理的な振る舞いを示しています。
• プログレッシブレンダリング：
  • JPEG XL は高努力モードでは追加コストがほぼゼロです。

    jixel

    は初期プレビュー機能を備え、ファイルサイズは 12% しか大きくありません。Firefox と Chrome はサポートしています。Safari は最終画像はレンダリングしますが、プログレッシブプレビューは表示しません。
  • AVIF もプログレッシブレンダリングをサポートします（現在は Chrome 限定）。JPEG XL よりも制御でき、ファイルサイズが小さく、デコード速度も格段に速いです。
• HDR の場合：JPEG XL はゲインマップに対応しておらず、AVIF に比べて大きな制限です。ブラウザのデコーダーやエンコード方も混乱した状態です。
• 既存 JPEG を変換する場合：追加の画質劣化なしに 9%〜20% ファイルサイズ削減でき、デコード速度も同等かそれ以上速いです（小画像除く）。
• 有損レスの場合：JPEG XL が明確な勝者です。WebP は写真で 9%〜17% 大きく、AVIF は 30%〜120% 大きくなります。ただし、ウェブ上有損レスはほとんど不要です。

  jixel

  の高努力モードには注意が必要です（デコードが非常に遅くなる可能性があります）。
• アニメーション画像形式：依然として推奨できません。使用しないでください。

デフォルト推奨設定

ウェブ利用のためなら、現時点では 「AVIF 4:4:4 に、できる限りの高努力設定」 をデフォルトにしています。AVIF から生成されるファイルが異常に大きいと感じた場合は、JPEG XL（

jixel

を経由して）を試して確認するのが良いでしょう。 ※両方とも最近大きく改善されているため、推奨事項も将来変わる可能性があります。誤情報が溢れているため、ご自身の画像で実際にテストすることをお勧めします。

---

方法論

各種エンコーダーと設定で画像をエンコードし、詳細を記録するベンチマークスクリプトを作成しました。使用したのは執筆時点での最新リリースバージョンです：

• avifenc

  1.4.2

• libjxl

  0.12.0（cjxl エンコーダー使用）

• jixel

  0.4.2 (git f487299) — 第 2 の JPEG XL エンコーダ

• cwebp

  1.6.0 — 有損レス WebP 用に使用

画像設定

• 画像の選択を施し、大多数をこのブログで表示される最大幅の 2 倍である 1598 ピクセル の幅にエンコードしました。これにより、高密度ディスプレイを持つユーザーにとってシャープに見えます。
• 小型または低密度の画面で閲覧されている場合は、完全な体験をお楽しみいただけない場合があります。
• ベンチマークは 2024 年モデル MacBook Pro (M4 Pro) で実行しました。

---

有損圧縮ベンチマーク結果

F1 カール画像（一般的な写真）

AVIF の詳細について最初に書いた際にも F1 カーを最初の画像にしたので、またそれをやろうと思いました！画像を変なエンコーダ画質でエンコードし、特定の SSIMULACRA2 スコア に最も近いバージョンを選択しました（50=中品質、70=高品質、80=非常に高い品質、90=視覚的に有損レス）。

結論

• ファイルサイズ：AVIF が勝ります。デフォルト設定では、同等の画質において最高の JPEG XL 画像でも AVIF より 14%〜17% 大きくなります（最大努力モードでは 6%〜15%）。

  jixel

  の最も遅い設定では、AVIF デフォルトをわずかに上回り、ファイルサイズは 1%〜10% 小さいです。
• エンコード時間：AVIF が勝ります。デフォルト設定では

  jixel

  は AVIF より速くても、ファイルサイズが大きいです。AVIF デフォルトのファイルサイズを合わせるには

  jixel 'extraslow'

  が必要で、時間は 18〜27 倍かかります。
• エンコードメモリ使用量：AVIF が勝ります。デフォルト設定では

  jixel

  は半分程度のメモリを使用しますが、ファイルサイズが大きいです。AVIF デフォルトのファイルサイズを合わせるには約 10 倍のメモリを使います。
• デコード時間：AVIF が勝ります。JPEG XL は中品質の場合、通常 AVIF より 2〜3 倍 かかりますが、非常に高い画質になると縮まります。Safari の JPEG XL デコーダは最も遅いです。

高努力モードについて

• AVIF では価値があります：約 3 倍のエンコード時間をかけても、ファイルサイズは約 10% 小さくなります。

• jixel

  では価値があります：'slow' はデフォルトの 'fast' に比べて 9〜13% ファイルサイズを削減し、エンコード時間は約 3.7 倍です。'extraslow' はさらに節約できますが、時間とメモリは大幅に増えます。

• libjxl

  では価値がありません：最大努力モードはデフォルトと比べてほとんど良くないですが、約 18 倍の時間をかかります。

4:2:0 モードについて

あまり効果的ではありません。エンコード/デコードはわずかに速く、メモリも少なく使えますが、ファイルサイズは有意に小さくならず、高品質化も困難です。

People（人間の顔）

AVIF の詳細を滑らかにする傾向が人間の顔に不向きだと感じるため、Unsplash からこの画像を選びました。

• 結論：F1 カール画像と同様の傾向が見られます。
  • ファイルサイズ：AVIF が勝ります（デフォルト設定では 17%〜24% 大きい）。高品質な範囲では

    jixel

    がより良い JPEG XL エンコーダです。
  • エンコード時間/メモリ：AVIF が有利です。
  • デコード速度：AVIF が勝ります（中品質は 2〜2.9 倍かかる）。非常に高い画質になると差は縮まります。

レッドパンダ（毛並みの鋭いライン）

髪の毛の鋭いラインのため、以前とは異なる結果が出ました。結果は以前のものよりはるかに近いです。

• 結論：
  • ファイルサイズ：AVIF が僅差で勝ります（

    jixel

    で 2%〜6% 大きいのみ）。中品質でも他の画像に比べて元の画像との違いは目にあまり顕著ではありません。
  • エンコード速度：高品質設定では JPEG XL（

    jixel

    ）が勝ることがあります。
  • メモリ使用量：低い努力レベルでは JPEG XL（

    jixel

    ）が勝ります。

ワスル（Weasel）— JPEG XL が勝る例外ケース

これまでの写真の比較では AVIF が JPEG XL を上回っていますが、例外としてこの画像のようなものがあります。

• 結論：JPEG XL が明確に勝ります。
  • ファイルサイズ：デフォルト設定では最高品質の JPEG XL 画像が AVIF より 4%〜11% 小さくなります（最大努力モードでは 12%〜27%）。
  • エンコード速度：JPEG XL（

    jixel

    ）が勝ります（AVIF より 28%〜38% 速く、同サイズか小さなファイルを生成）。
  • メモリ使用量：JPEG XL（

    jixel

    ）が勝ります（AVIF より 14%〜24% メモリを少なく使い）。
  • デコード速度：Chrome で高い品質の場合を除き AVIF が勝りますが、Firefox と Safari では差は縮まります。

スクリーンショット

写真以外のものを試してみましょう。

• 結論：AVIF が大幅に勝ります。
  • ファイルサイズ：デフォルト設定では中・高品質（

    jixel

    ）で同等の画質において最高の JPEG XL 画像は AVIF より 73%〜89% 大きく、非常に高い品質（libjxl）では 29%〜44% 大きいです。
  • パッチ機能：この画像で大きく助けになりますが、デフォルトではオフです。パッチを使用すると、高努力モードの SSIMULACRA2 〜65 以上で

    jixel

    ファイルサイズは 10%〜29% 小さくなります。

イラスト

多くの場合、主に平坦な色の画像では SVG を使用します。ただし、それが不可能（スクリーンショットの場合）または望ましくない（このケースのような場合）こともあります。圧縮およびミニファイされた SVG ではまだ 1.1 MB です。その結果、ラスター形式がファイルサイズとデコード/描画時間で勝利します。

• 結論：AVIF が大幅に勝ります。
  • ファイルサイズ：デフォルト設定では SSIMULACRA2 80 まで最高の JPEG XL 画像（

    jixel

    ）は AVIF より 32%〜65%、それ以上では約 90% 大きいです。
  • パッチ機能：この画像では役立ちません。スクリーンショットとは異なり、パッチの有無でファイルサイズは同一ですが、エンコード時間とメモリを増やします。

アルファ（透明性）

透明度のある画像はどうでしょうか？

• 結論：AVIF が大幅に勝ります。
  • 特徴 1：

    jixel

    は常にアルファチャンネルを有損レスでエンコードします。この画像では

    jixel

    に大きな不利をもたらします（デフォルト設定で AVIF の 1.9〜3.1 倍のサイズ）。
  • 特徴 2：SSIMULACRA2 は完全透明のピクセルを完璧として扱うため、多くの透明度がある場合、不透明画像よりもスコアが高くなります。

小画像・大画像

• 小画像：それほど変わりません。フルサイズの F1 イメージの結果とほぼ似ています。
• 大画像（1800 万画素）：通常の写真と同じ話ですが、いくつかの違いがあります。非常に高い画質では JPEG XL が追いつきます。SSIMULACRA2 〜85 では libjxl デフォルトが AVIF デフォルトに匹敵し、最大努力モードでは

  jixel 'extraslow'

  が AVIF s0 より約 6% 小さくなります。

画質の安定性

AVIF に向けられた別の批判として、その画質が信頼性に欠けると指摘されています。私が今まで見てきた画像について、各エンコーダで特定の品質設定（avifenc -q 50, cjxl -q 70, jixel q80）でエンコードし、得られた SSIMULACRA2 スコアを記録しました。

結果：すべてのエンコーダの振る舞いは本当に似ています。すべてが SSIMULACRA2 スコアの範囲を出力し、同じ画像に対してはすべて上か下へ変化します。「ワスル」画像ではより低い品質を選択しており、ノイズを取り除いて画像主体の品質を低下させることなく処理しています。問題ないと思います。

プログレッシブレンダリング

AVIF と JPEG XL ともに、画像読み込み中に段階的に表示することが可能です。Chrome と Firefox はプログレッシブ JPEG XL をサポートしますが、AVIF のプログレッシブは Chrome のみです。

• 仕組みの違い：
  • JPEG XL：低解像度バージョンをレンダリングしてから高分解能タイルを読み込む方式。「プログレッシブ DC」と呼ばれ、最も重要です。
  • AVIF：進捗はビデオのフレームのように機能します（最大 4 つのフレーム）。各フレームは前回のフレームからデータを最適化に使用できます。
• 推測：
  • 悪い接続：バーストとして到着する傾向があるため、小さな画像での利益は少ない。
  • 代表的なプレビュー：AVIF で選んだプレビューフレーム（1/8 解像度）では、オープンホイールレースカーであることがわかります（約 11.5 kB）。JPEG XL は BlurHash 様のプレビュー（約 2 kB）で画面に表示しますが、品質が低く、ユーザーエクスペリエンスは疑わしく、完全読み込みと間違える可能性があります。
  • オーバーヘッド：プログレッシブなしに比べ、サイズ増やエンコード時間は多少かかりますが、デコード速度への影響はブラウザによります。

HDR（高ダイナミックレンジ）

JPEG XL フォーマット自体はゲインマップをサポートしていますが、どのブラウザも対応しておらず、エンコード方も混乱した状態です。AVIF はゲインマップをサポートしており、SDR 画像と HDR 画像の 2 つを提供することでエンコードします。

• 結論：AVIF が優れています。
  • ゲインマップは SDR ディスプレイ上で無視されるため、PQ イメージは悪く見えますが、ゲインマップの方が低輝度レベルや極端な輝度レベルで良いです。
  • SSIMULACRA2 は SDR しか理解しないため、スコアは実験的 HDR モードから取得されました。

JPEG トランスコード

既存の JPEG を JPEG XL に変換することを許可します。F1 イメージを様々なサイズと JPEG 品質でテストしました。

• ファイルサイズ：JPEG XL は JPEG より 9%〜20% 小さいです。
• デコード時間：より大きな画像では、Chrome と Safari で JPEG XL がより速くデコードされます。Firefox ではほぼ同等の速度になります。

有損レス（Lossless）

ウェブ上有損レス画像が必要なことは非常に稀です。しかし、JPEG XL は有損レスに優れています！

• 結論：JPEG XL が勝ります。
  • ファイルサイズ：libjxl が最小のファイルを生成し、WebP はそれと同等です（AVIF よりも 30%〜176% 大きい）。
  • エンコード速度：libjxl デフォルトが速く、小さなファイルを生成します。
  • デコード速度：画像によります。WebP が写真のデコードで有利ですが、JPEG XL も非常に高速です。有損レス AVIF は特に遅いです（Chrome で libjxl の出力の最大 4 倍かかる）。

jixel

の設定推奨

• jixel 'medium'

  ：ファイルサイズのスイートスポットです。すべての画像で libjxl デフォルトを beating（0.5%〜23% 小さく）し、写真で最高の結果の 2%〜3% 以内に収まります。ただし、メモリ使用量は 470〜670 MB で、出力は libjxl よりも遅く、特に Safari でデコードが遅いです。

• jixel 'slow' / extraslow

  ：写真で非常に遅くデコードされます（libjxl の出力に対して 2〜13 倍）。スクリーンショットやイラストでは起きませんが、このページのような使用ケースでは避けるべきです。

アニメーション

アニメーション画像形式は愚かで、アニメーション JPEG XL も例外ではありません。ビデオ形式の方がビデオに優れています。エンコードだけでなく再生にもそうです。AVIF は AV1 ビデオのキーフレーム形式にほぼ等しく、静止画特化の最適化が追加されています。

• 結論：使用しないでください。動画にはビデオ形式を使用してください。

---

最終的な考察

これで終わりです！最初に結論をすでに提示しましたので、公開準備ができたと考えます。 少し緊張していますが、JPEG XL に関する議論は少し…奇妙になることがあります。Google が JPEG XL を「沈黙」しようとしているという陰謀論をよく見かけますが、プロジェクトのリーダーの一人は Google で働いていたチームの一員であり、JPEG XL に取り組んでいました。

この記事の最初のバージョンは JPEG XL に対して非常に否定的でしたが、

jixel

が話題になり、正直とても興奮しています。現在 AVIF と JPEG XL の間に本格的な競争があり、どちらが勝っても、私たちはすべてより良い画像圧縮から恩恵を受けます。