自動コンテンツネゴシエーションによる圧縮効率の向上

AVIF と WebP は、どちらも最新の画像フォーマットであり、高い圧縮効率を保ちながら画質を損なわない優れた性能を備えています。AVIF は AV1 コーデックを基にしており、WebP よりもさらに小さなファイルサイズを実現できるほか、HDR、広色域、高度な透過処理などの機能もサポートします。Google によって開発された WebP も、ロスレス・ロッシー圧縮、透過、アニメーションなどをサポートしています。

これらのフォーマットは、かつてはブラウザごとのサポート状況がまちまちでしたが、現在では Chrome、Firefox、Safari（14 以降）、Edge、Opera といった主要なブラウザで AVIF および WebP がサポートされており、開発者は安心して本番環境で使用できるようになっています。

実際にこれらのフォーマットを使用することで、画像のファイルサイズを大幅に削減できます。当社の顧客の多くは、従来フォーマットと比較して約半分のサイズに画像を圧縮できており、画質の劣化もありません。この利点を最大限に活用するために、Imgix では auto=format による自動コンテンツネゴシエーションを提供しており、特別な設定なしでブラウザのサポート状況に応じた最適なフォーマット（AVIF または WebP）を自動で配信できます。

Imgix が出力可能なフォーマット（AVIF、WebP、PJPEG、JPEG XR など）の完全な一覧は、format パラメータのドキュメントをご覧ください。

自動コンテンツネゴシエーションの仕組み

ユーザーごとに最適なフォーマットを選定するのは簡単ではありません。たとえば、AVIF に非対応のブラウザに AVIF を配信してしまうと、画像が表示されなくなります。

Imgix の auto=format を使用すれば、リクエストヘッダーやユーザーエージェントをもとに自動で最適なフォーマットを判断し、AVIF、WebP、もしくはフォールバックフォーマットを正しく配信・キャッシュできます。

画像 URL に auto=format を追加するだけで機能します：

Edit in Sandbox

AVIF に対応しているブラウザには AVIF、非対応でも WebP に対応していれば WebP、それ以外には JPEG（または元のフォーマット）を自動で返します。

また、q（品質）パラメータで出力画像の品質を制御することも可能です：

Edit in Sandbox

fm を使ったフォールバックの指定

すべての端末で一貫した表示や透過表現を維持したい場合は、auto=format に加えて fm パラメータでフォールバック形式を指定しましょう。たとえば、アルファ透過を保持したい場合は fm=png を指定します：

https://static.imgix.net/feature-retina.png?fm=png&auto=format

この設定により、対応ブラウザでは AVIF または WebP を配信し、そうでない場合は PNG にフォールバックします。

AVIF と WebP のどちらもロスレス圧縮に対応しているため、ロスレスで出力したい場合は以下のように lossless=1 を追加します：

https://static.imgix.net/feature-retina.png?fm=png&auto=format&lossless=1

圧縮結果とその測定方法

新しい画像フォーマット（WebP および JPEG XR）を使用したことで、全顧客平均で 41% のファイルサイズ削減が見られました。ある写真中心の顧客では、すべての画像において 18〜74% の削減を確認しています。

Hacker News のスレッドでこのデータが話題になったため、以下に測定方法を説明します。

1. 自動コンテンツネゴシエーションのベータテストに参加していた顧客の画像リクエストのうち、約 1% をランダム抽出しました（対象は約 48 時間分で、1,159,515 件のレコードが取得されました）。

2. JPEG または PNG として返されたリクエストを抽出・重複排除して、118,037 件の一意な画像リクエストを得ました。

3. 同様に、WebP または JPEG XR として返されたリクエストも抽出・重複排除し、119,303 件の一意なリクエストを得ました（JPEG や PNG はブラウザにより WebP や JPEG XR に変換されない場合もあるため、件数が一致しません）。

4. 元のフォーマットと新しいフォーマットを外部結合し、JPEG または PNG と WebP・JPEG XR とのファイルサイズ比較を可能にしました（合計で 123,791 件の比較が実施されました）。

5. これらの比較結果から統計的なパーセンタイルおよび平均を算出し、本チュートリアルで紹介しています。