世界を動かす技術を、日本語で。

JPEG XLとAVIFのウェブ利用ケース比較

2026年10月17日原文(jakearchibald.com)

概要

  • JPEG XLが主要ブラウザに対応し、他画像フォーマットとの比較が活発化
  • Web用の非可逆写真圧縮ではAVIFが高圧縮率を実現
  • 透過・イラスト・スクリーンショットもAVIFが優位
  • JPEG XLはロスレス圧縮で最強、既存JPEGの圧縮率向上も可能
  • エンコーダや用途により最適解が異なるため、実画像での検証が重要

JPEG XLとAVIFの比較総まとめ

  • Web向け写真 では、 AVIFがほぼ常にJPEG XLより小さいファイルサイズ を生成
    • 標準設定で JPEG XLはAVIFより15~25%大きい
    • 最大努力設定でも 差は6~20%に縮小
    • 一部画像ではJPEG XLがAVIFに迫るか上回る例もあり、 個別最適化推奨
  • JPEG XLエンコーダの違い
    • jixel(新型エンコーダ)はlibjxlより小さいファイルを生成 (ただし透明度の多い画像は例外)
  • イラスト・スクリーンショット は AVIFが圧倒的に有利
    • JPEG XLはAVIFより 30~90%(標準設定)、20~70%(最大設定)大きい
    • ロスレス形式は不要 な場合が多い
  • 透明画像 もAVIFが優位
    • libjxlはAVIFより 31~44%(標準設定)、61~70%(最大設定)大きい
    • jixelは常に透明部分をロスレスで保存するため 2~3倍のファイルサイズ
  • エンコード速度・メモリ使用量
    • AVIFが全体的に高速かつ省メモリ
    • jixelはAVIFより速く省メモリだが、ファイルサイズが大きくなる傾向
  • デコード速度
    • AVIFが高速
    • JPEG XLは中画質で2~3倍、超高画質で1.5~1.8倍のデコード時間
    • Chromeは高画質時にJPEG XLのデコードが速い場合も
  • エンコーダの努力レベル調整
    • AVIF/jixelは高努力設定が効果的
    • libjxlは高努力設定が非効率 (速度・メモリ増加、サイズ改善ほぼなし)
  • AVIFの4:2:0モード
    • 基本的に サイズ削減効果は薄い ので4:4:4推奨(例外あり)
  • 画質設定の信頼性
    • どのエンコーダも 画質設定に応じた品質変動が妥当
  • プログレッシブ表示
    • JPEG XLは高努力時ほぼ無料でプログレッシブ対応
    • AVIFもChrome限定でプログレッシブ対応、今後Firefoxにも拡大予定
  • HDR対応
    • JPEG XLはgain map未対応 (仕様上は可能だがブラウザ未実装)
    • gain mapなしHDR比較ではJPEG XLの方が小さいファイルを生成する傾向
  • 既存JPEGの再圧縮
    • JPEG XLで9~20%圧縮率向上、デコードも高速(小画像除く)
  • ロスレス圧縮
    • JPEG XLが最強
      • Lossless WebPは9~17%大きい
      • Lossless AVIFは30~120%大きい
    • ただしWeb用途ではロスレスはほぼ不要
  • アニメーション画像
    • Web用途では非推奨
  • 実運用推奨設定
    • AVIF 4:4:4+高努力レベルが現時点のデフォルト推奨
    • AVIFが大きすぎる場合のみjixelでJPEG XLも試す
    • 両フォーマットとも進化中なので今後推奨が変わる可能性

ベンチマーク手法と検証画像

  • 最新エンコーダ使用
    • avifenc 1.4.2
    • libjxl 0.12.0(cjxlエンコーダ)
    • jixel 0.4.2
    • cwebp 1.6.0
  • 画像は幅1598pxに統一 (高密度ディスプレイ対応)
  • ベンチマーク環境:2024年MacBook Pro(M4 Pro)

画質・サイズ・速度の詳細比較(F1画像例)

  • 画質指標:SSIMULACRA2(50=中画質、70=高画質、80=超高画質、90=見た目ロスレス)
  • ファイルサイズ:AVIFが勝利
    • 標準努力でJPEG XLは14~17%大きい
    • 最大努力でJPEG XL(jixel 'extraslow')は6~15%大きい
    • jixel 'extraslow'はAVIFのデフォルト努力より1~10%小さいが、エンコード時間は18~27倍
  • エンコード速度:AVIFが勝利
    • jixelはAVIFより12~36%速いが、ファイルサイズは14~18%大きい
    • ファイルサイズを揃えるにはjixel 'extraslow'が必要で、エンコード時間が極端に長い
  • エンコードメモリ:AVIFが勝利
    • jixelはAVIFの半分程度のメモリで済むが、ファイルサイズはやはり大きい
    • ファイルサイズを揃えるにはjixel 'extraslow'で約10倍のメモリが必要
  • デコード速度:AVIFが勝利
    • JPEG XLは中画質で2~3倍、超高画質で1.5~1.8倍のデコード時間
    • SafariのJPEG XLデコーダは特に遅い
  • 高努力設定の効果
    • AVIF/jixelは高努力で10%前後のサイズ削減
    • libjxlは高努力で効果薄く、むしろファイルが大きくなる場合も
  • 4:2:0モード
    • エンコード・デコードは速いが、ファイルサイズ削減は限定的
    • 高画質化が難しくなるため、4:4:4推奨

まとめと今後の指針

  • Web写真・イラスト・透明画像・スクリーンショットはAVIFが最適解
  • ロスレス用途・既存JPEG圧縮はJPEG XLが最適解
  • エンコーダや画像の内容で結果が大きく変わるため、必ず自分の画像でテスト推奨
  • 両フォーマットとも進化が続いており、最新情報のチェックが重要

参考:グラフや詳細データは原文を参照

Hackerたちの意見

JPEG-XLについては軽く追ってるだけなんだけど、HNでの以前の読書からの印象では、JPEG-XLは多様なユースケースに対して最適な解決策だと思ってたんだけど、どうやら数字がその主張と合ってないみたい?

└

JPEG XLに関する主張はいつもぶっ飛んでるよね。例えば、これがそのクリエイターの一人からのツイートだよ。 https://x.com/jyzg/status/1592811472073416704

└

JPEG-XLは、既存の(「クラシック」)JPEGファイルを視覚的な品質損失ゼロでトランスコードできるから、すぐにでも使える利点があるよ。

└

JPEG-XLは、低品質の小さい画像を求めるなら最適な解決策じゃないよ。ウェブサイトのホスティングコストを下げるにはAVIFが適してるみたい。JPEG-XLは高品質の画像を保存・配布するにはベストな解決策だと思う。自分は高品質の画像が欲しいから、JPEG-XLが重要なんだ。新しい画像でも古いJPEG画像のアーカイブを圧縮するのにもね。自分のウェブサーバーはプライベート用で商業目的じゃないから、AVIFを使って小さい画像サイズを追求するつもりはないよ。自分が求める品質よりも低いものは使いたくないから。

└

様々なユースケースに対して、すべての孤立したユースケースではない。今日、AVIFは人々に広告を見せるのに適している^W^W^Wウェブコンテンツの配信に向いている。この文章のタイトルは「ウェブユースケースにおけるJPEG XLとAVIFの比較」。最近話題になった別の記事は「JPEG XLのウェブ画像コーデックとしての位置を探る」というサブタイトルがついていて、最後にはこう書かれている。 > JPEG XLは無駄ではない。ウェブ以外のユースケースにおいて本当に魅力的な技術だ。¹ https://news.ycombinator.com/item?id=49690554 (どちらにしても、webpはもうやめにしようぜ。)

└

AVIF(あるいはAV1自体)は、過去6年間で品質の向上が大きく進んでる。JPEG XLは2020年にリリース間近で、2021年に最終化された。その頃の感情は今でも当てはまる。JPEG XLは常に高品質なエンコーディングを最優先していて、低いBPPの画像に関してはAV1が優れている。今のMP3やLAMEについてのトップコメントも、エンコーダが最大限のポテンシャルを引き出すことについてだ。JPEG XLは2021年には最高だったかもしれないけど、それ以降は生き残りをかけて戦ってる。JPEG XLが得意な画像もたくさんある。テキスト入りのスクリーンショットは、最適化されていないことが知られているし、良い結果が出るとは思われていない。ロスレスモードの方が良いかもしれない。編集:ここにある他のコメントが私の意見を証明してくれた。もしAVIFの改善が少しでも伝えられていたら、感情は少し違ったかもしれない。でも、WebPやAOMのロードマップを売った人たちを信じるつもりはないけどね。とにかくAV2が来るし、JPEG XLもついにすべてのブラウザで使えるようになった。未来にはもっと良いものがあるといいな。

└

GoogleがChromeでJPEG XLをブロックするのを好まない人が多いと思う。競争できるかどうかじゃなくてね。JPEG XLには、ロスレス再エンコードや高解像度のサポートなど、多くのユースケースに対して大きな利点がある。私が最後に確認したとき、AVIF画像の最大サイズは8192x4352だった。それはほとんどの場合、ウェブ画像には問題ないけど、もっと大きいサイズが必要な場合もあるよね。AFIVは全体で12bitに制限されるかもしれないけど、JPEG XLは32bitまで対応できる。これがウェブで多くの人にとって重要かどうかはわからないけど、もし気にする人がいれば、すごく意味のあることかもしれない。あと、90%の品質レベルを気にするなら、JPEG XLはしばしばAVIFよりも優れているけど、ウェブに画像を載せるときは、たいていそれ以下になっちゃう。中には誤った情報もあった。JPEG XLが計算負荷が少なく(WebPよりも少ない)、圧縮率がずっと良いって言ってる人もいたし、データが選択的だったりすることもあった。95%の品質レベルでしかテストしないで勝者を宣言するの?でも、やっぱり多くの人が二つのフォーマットがそれぞれのメリットで成功したり失敗したりすることを望んでいたと思う。多くの人がAVIFを好まないのは、ブラウザ以外でのサポートが悪いからで、JPEGという名前があればJPEG XLもJPEGのように広まることを期待しているかもしれない。フォーマットを本当に比較するのは難しいし、ベンチマークも一般的に難しい。記事が示しているように、異なるJPEG XLエンコーダーは全く違う性能を提供するし、ロスのある圧縮を扱うときは、個人の好みが影響することもある。いつの間にか、人々はMP3がシンボル(楽器)の音を歪ませるのを楽しむようになって、それがシンボルの音だと期待するようになった。

あのF1の画像は、AVIFの何が問題かを証明してると思う。よく見ると、車の美しいハイライトが消されて、何かありそうなものに置き換えられてる。これに気づいたらもう元には戻れないし、まだこれを例に出してる人がいるのが信じられない。確かに、AVIFはブログの大きなヒーロー画像みたいなもので印象を作るにはすごく良いけど、細かく見られることはないからね。ミラーレスで撮った写真を圧縮してるときには、ミラーレスで撮った写真みたいに見えることを期待してるから、あんまり感心しないな。

└

できる限りじっくり見てるけど、君が言ってることがわからないよ。(車にも写真にも詳しくないし。)ハイライトって何を指してるの?何を探せばいいの?

└

そのハイライトを囲んでもらえる? https://jakearchibald.com/c/original-CXtAofvc.jpg - https://jakearchibald.com/c/avif-q39-e0-d8-yuv444-ssimu70.4-... を100%拡大して数分見たけど、特に気づかなかった。もしかして目かモニターが悪いのかな…

└

あ、待って。何が起こってるか分かった。君が見てるのはJPEG XLをサポートしてないブラウザだから、WASMレンダラーにフォールバックしてて、リサイズの扱いが違うと思う。これは完全に私のミスだ。フォールバックレンダラーを追加して良いことをしてると思ってたけど、同じじゃなくて、みんなに誤解を与えてる。ロスレス版はJPEG XLだから、AVIFとは違うんだ。

アニメーション画像フォーマットはダメで、アニメーションJPEG XLも例外じゃない。動画フォーマットの方が動画には向いてる。そもそもそれ用に作られてるし、最適化もされてる。エンコーディングだけじゃなくて、再生の面でもね。これがJXLとAVIFを比較する時にあまり注目されてない気がする。AVIFはGIFの代わりになれる。> それはその通り。> いや、デモは追加しないよ。サーバーに置きたくないし。動画には動画フォーマットを使って。 「動画には動画フォーマットを使って」というのは、AVIFをJXLの代わりに使えってことなのか、AV1をAVIFの代わりに使えってことなのか、ちょっとわからない。後者なら、GIFのようなアニメーションはユーザーの期待が違うから、普通の動画とは別のものとして扱うのが理にかなってる。GIFは一時停止や再生、スクラブのようなコントロールが期待されてないから、完全な期待される動作をエンコードしてないしね。コントロールを隠しても、ユーザーは画像ビューアや新しいタブで開いた時に似たような動作を期待するだろうし。画像にはコントロールがないから、画像としてはフィットするけど、もしかしたら独自のカテゴリーが必要かも。あと、AVIFがプログレッシブレンダリングにどれだけ優れてるか、全然知らなかった。そんなことができるなんて思ってもみなかったよ。AVIFはウェブにとって明らかに勝者だと思うけど、ロスレスのためにJXLがあるのもいいね。なんかAVIFはもっと使われるべきなのに、まだそこまで普及してない気がする。特に今はほぼどこでもサポートされてるのに。AVIFよりもwebpをよく見るし、JPEGはまだどこにでもある。JXLが出たことで、開発者たちがもう一度見直してくれるといいな。AVIFはブラウザの96.35%-98.83%にサポートされてるけど、webpは97.18%-99.68%、JPEGは97.28%-99.78%。それに、RustのJXLエンコーダー「jixel」があることも知らなかった。[0] [0] https://github.com/awxkee/jixel

Hacker Newsで議論の続きを見る