AV1 Image File Format（AVIF）は、オープンソースの AV1 動画コーデックをベースにしたエンコードです。AVIF は WebP よりもさらに新しくなり、Chrome と Opera では 2020 年以降、Firefox は 2021 年、Safari は 2022 年以降のみサポートされます。WebP と同様に、AVIF はウェブ上のラスター画像で考えられるあらゆるユースケース（GIF のようなアニメーション、PNG のような透明度、JPEG や WebP よりも小さいファイルサイズでの知覚品質の向上）に対応することを目指しています。
これまでのところ、AVIF は有望です。AV1 コーデックの開発を担当するグループである Alliance for Open Media の創設メンバーである Netflix が開発したテスト フレームワークでは、JPEG や WebP と比較してファイルサイズが大幅に削減されています。Cloudinary と Chrome のコーデック チームによる追加調査では、現在のエンコード標準に対して好意的に評価されています。
ツールは比較的制限されていますが、Squoosh が提供しているエンコードの 1 つとして、今すぐ AVIF を試し始めることができます。
ブラウザ サポート
私たちが JPEG の議論に長時間を費やしてきたのはなぜでしょうか。AVIF と WebP の方が高品質の結果とはるかに小さいファイルサイズを提供できるのに、なぜなら JPEG と新しい画像エンコードが大きな悩みの種になったからです。GIF、PNG、JPEG のサポートは、すべてのブラウザで保証されており、すでに数十年前から存在しています。従来の画像形式と比べると AVIF はまったく新しいもので、WebP のサポートは最新のブラウザで優れていますが、ウェブ全体では認められていません。
ご想像のとおり、品質と転送サイズの両方の向上を目的とした新しい画像形式の開発には、膨大な時間と労力が費やされました。WebP、AVIF、JPEG XL（どのブラウザでもサポートされていません）などの形式は、SVG がベクター形式であるのと同様に、ウェブ上の画像をラスターするための統合ソリューションになることを目指しています。JPEG 2000（Safari でのみサポート）などは、ベースライン JPEG と同じユースケースをすべて満たすことを目的としていますが、圧縮方法を改善して、視覚的に似ているがはるかに小さい画像を提供します。
これらの新しい形式の一部は JPEG 名を使用していますが、エンコードは JavaScript と Java と根本的に類似しています。特定のエンコードをサポートしていないブラウザでは、その画像ファイルをまったく解析できません。これは、あなたが理解できない言語でグラフ用紙のピクセル グリッドに記入するように指示したようなものです。ブラウザは画像データをリクエストし、解析を試み、失敗した場合は何もレンダリングせずに破棄します。画像ソースが最新のブラウザ以外でレンダリングされないと、コンテンツやウェブ全体にとって大きな障害点となります。画像の破損や、世界中の膨大な数のユーザーの帯域幅の無駄が発生します。ウェブのパフォーマンスを向上させるために、復元力の高いウェブを犠牲にすべきではありません。
ひたむきな友達の <img> は長い間、新しい画像形式を使用するのは極めて困難でした（どれほど有望そうに見えても）。<img> は単一のソースファイルしかサポートしておらず、そのファイルを迅速に転送するように高度に最適化されており、実際、JavaScript を介してリクエストをインターセプトすることはできなかったことを思い出してください。最近まで、実行可能な選択肢は、すべてのユーザーにまったく新しいタイプの画像を提供し、ブラウザでエラーが発生したときに「レガシー」形式の 1 つをリクエストすることでした。1 つ目の形式が無駄になった後に、2 回目のファイル転送が発生します。
このような理由から、何十年も存在していた <img> は変える必要がありました。次のモジュール「レスポンシブ画像」では、こうした問題に対処するために HTML 仕様に導入された機能と、それらを日常業務で使用する方法について学習します。