AVIF vs JPEG XL: 一方が普及し、もう一方が普及しなかった理由

AVIFを使用してください。なぜなら、AVIFはすべての主要なブラウザでサポートされているのに対し、JPEG XLはサポートされていないからです。 ほとんどの技術的指標において、JPEG XLは可逆JPEGトランスコーディング、プログレッシブデコード、バイトあたりの優れた品質を提供し、より強力なフォーマットです。しかし、実用的な観点から言えば、オープンなWeb上では展開できません。

Chromeはエコシステムからの関心が不十分であることを理由に、2023年にJPEG XLのサポートを削除しました。Chromeのサポートなしに、Web画像フォーマットが普及することはありません。AV1 Image File Format（AVIF）は、ブラウザベンダーがすでに投資していたビデオコーデックであるAV1に乗っかることができたという優位性がありました。優れた技術が、より強力な配信ストーリーを持つ技術に敗れたわけですが、これは新しいパターンではありません。

2つのフォーマットの比較

JPEG XLはエンコード速度、プログレッシブ読み込み、可逆JPEG変換で勝っていますが、AVIFは導入を決定づける唯一の基準であるブラウザサポートで勝っています。

可逆JPEGトランスコーディングの行は、Webが失った機能です。JPEG XLは、既存のJPEGを画質劣化なしに約20パーセント小さく再パッケージし、元の同一ファイルに戻すことができます。これにより、アーカイブを全くリスクなしに縮小することが可能でした。

ChromeがJPEG XLを削除した理由

Chromeは、エコシステムからの関心が不十分であること、既存のフォーマットに対するメリットが限定的であること、そして別のデコーダーを維持するためのメンテナンスコストを理由に挙げました。 この決定は2022年に発表され、2023年に発効しました。

この推論は当時も異議を唱えられ、現在も議論が続いています。支持派は、測定可能な圧縮の優位性や、複数の大手画像パブリッシャーからの支持を指摘しました。反対派は、ブラウザがすでにビデオ用に提供しているデコーダーを使用して、AVIFがすでにほとんどのメリットをもたらしていると主張しました。どちらの見解が正しいにせよ、Chromeに対応していないフォーマットは、Webトラフィックの大部分に提供することはできません。

JPEG XLが現在も使用されている場所

JPEG XLは、プロの写真撮影、アーカイブ保存、そして単一のベンダーがパイプラインを制御するAppleのソフトウェアで生き残っています。 Safariは2023年にサポートを追加し、Appleプラットフォーム上でこのフォーマットを存続させています。

• 写真アーカイブは、可逆JPEGトランスコーディングを使用して、損失のリスクなしにストレージを削減しています。
• プロのカメラワークフローは、高いビット深度と広い色域のサポートから恩恵を受けています。
• Appleプラットフォームはデコード可能であるため、クローズドなエコシステム内での利用が現実的です。
• 医療および科学イメージングは、可逆モードとプログレッシブデコードを重視しています。
• オープンなWebでは使用できません。Webで使用するには、すべてのブラウザで動作するフォーマットである必要があります。

WebサイトでAVIFを使用するタイミング

WebPと比較して20〜30パーセント削減できる、最も大きな写真にAVIFを使用してください。 この優位性は画像サイズが大きくなるほど顕著になり、小さなグラフィックでは消失します。

ヒーロー画像、全幅バナー、写真ギャラリーなどが明確なユースケースです。約10 KB未満では、コンテナのオーバーヘッドが圧縮によるメリットを上回るため、AVIFファイルはWebPの同等品よりも大きくなることがよくあります。重い画像にはAVIFを、それ以外にはWebPを使用するようにライブラリをサイズごとに分割することで、エンコードコストを抑えつつ、メリットの大部分を享受できます。

AVIFエンコードのコスト

AVIFのエンコードはWebPよりも数倍遅いため、単一の画像よりも大量の一括処理において問題になります。 WebPへの変換が1秒未満で終わる写真でも、AVIFでは数秒かかることがあります。

500枚の画像を一括処理する場合、その差は数分単位になります。デコードはサポートされているすべてのブラウザで高速に行われるため、このコストは画像ごとに1回だけ支払えば済みます。マシンが他の作業をしていないときに大規模な変換を計画し、ブラウザのタブはフォアグラウンドに維持してください。ブラウザはバックグラウンドタブの動作を制限するため、作業が大幅に遅くなる原因になります。

AVIFを安全に配信する方法

古いブラウザを壊さずにAVIFを使用するには、次の5つの手順に従ってください。

1. 各ページの最も大きな画像（通常はヒーローバナーやメインの写真）を特定します。
2. 各画像をページ上で占める幅に縮小します。高解像度ディスプレイ用に2倍のサイズにします。
3. AVIFはJPEGよりも低い数値でディテールを維持できるため、品質設定60〜70でAVIFに変換します。
4. 同じソースを2番目の選択肢としてWebPに変換し、最終的なフォールバックとして元のJPEGを保持します。
5. picture要素を使用して、最初にAVIF、2番目にWebP、そしてimgタグにJPEGを指定して、3つすべてを配信します。

ブラウザは自身が理解できる最初のフォーマットを選択するため、どこでも表示が崩れることはありません。通常、マークアップを記述する方が、ファイルを変換するよりも時間がかかります。

AVIFの品質設定は挙動が異なる

AVIFの品質60はJPEGの品質85と同等に見えるため、慣れ親しんだ数値はそのまま適用できません。 AVIFでJPEGの習慣を踏襲すると、必要以上に大きなファイルが作成されてしまいます。

写真の場合はまず60から始めて、そこから調整してください。AVIFは過度な設定を行うと、ブロックノイズを発生させるのではなく、細かい質感を滑らかにしてしまう傾向があるため、芝生や髪の毛、布地が絵の具で塗ったように見える現象に注意してください。このアーティファクトはJPEGのブロックノイズよりも不快感は少ないですが、指摘されるまで気づきにくいものです。

フォーマットの勝敗が決まる仕組み

画像フォーマットを決定づけるのは技術的な優位性ではなく配信力であり、ブラウザベンダーがその配信力を握っています。 同じパターンが、Chromeがサポートしたことで成功したWebPや、技術的に優れていたにもかかわらず失敗したJPEG 2000の結果をもたらしました。

AVIFは、画像ではなくビデオに関する決定から恩恵を受けました。ブラウザベンダーはストリーミングコストを削減するためにすでにAV1に投資していたため、同じデコーダー上に構築された画像フォーマットを追加するコストはほとんどかかりませんでした。一方、JPEG XLは新しいデコーダー、新しいメンテナンス、新しいセキュリティリスクを必要とし、ブラウザベンダーはそのメリットがすでに提供しているものに対して限定的であると判断しました。

一般のユーザーに影響はあるか

いいえ、ほとんどの人は画像フォーマットを直接選択することはなく、決定は公開に使用するプラットフォームによって行われます。 この議論が重要になるのは、独自の配信を管理するサイト所有者、写真家、開発者です。

マーケットプレイス、ソーシャルネットワーク、またはホスト型のサイトビルダーを通じて公開する人は誰でも、JPGまたはPNGをアップロードし、プラットフォームに再エンコードを任せています。フォーマットの議論が関係してくるのは、訪問者がダウンロードするファイルを自分で管理する場合のみであり、そのためWebパフォーマンスの議論では主流ですが、それ以外の場所では目に見えません。

あなたのライブラリにとってこれが意味すること

可逆圧縮のマスターファイルを保持し、AVIFとWebPを配信し、フォーマットの議論は無視してください。 配信フォーマットは数年ごとに変わりますが、マスターファイルは無期限に役立ちます。

ライブラリ全体を配信フォーマットに変換し、オリジナルを削除してしまった人は、以前にもこの問題に直面したことがあります。ストレージはカタログを再撮影することに比べれば安価であるため、実用的な戦略は、手元にある最高のバージョンを保存し、Webのトレンドが変わるたびに配信用のコピーを生成することです。

JPEG XLは復活するか

復活するにはChromeが決定を覆す必要がありますが、そのような計画を示唆する発表はありません。 Safariのサポートや写真ソフトウェアからの継続的な関心により、フォーマットが完全に消滅することはありません。

フォーマットがこれよりも悪い状況から復活した例はあるため、この問題は決着がついたわけではなく、未解決のままです。しかし、その可能性を前提にWebサイトを構築するのは賢明ではありません。現在は配信にAVIFとWebPを使用し、マスターは可逆フォーマットで保持してください。そうすれば、将来新しいフォーマットを採用することになっても、再構築ではなく一括変換で済みます。

ライブラリをAVIFに変換する

既存のJPEGからではなく、オリジナルのマスターから変換してください。非可逆圧縮のソースは新しいファイルに劣化を引き起こすためです。 AVIFエンコーダーは、実際のディテールと区別できないJPEGのアーティファクトを表現するために容量を消費してしまいます。

最大500個のファイルを追加するか、ZIPアーカイブを渡すだけで、セット全体が1回の実行でエンコードされます。すべてはご自身のプロセッサ上のブラウザ内で実行されるため、写真ライブラリ、クライアントの作業、未公開のキャンペーンアセットがサーバーに送信されることはありません。ローカルでエンコードすることは、大量の一括処理がアップロード速度ではなく、お使いのマシンの速度で実行されることも意味します。