自動コンテンツネゴシエーションによる圧縮の改善

WebPはGoogleによって開発された画像フォーマットで、ロッシー（非可逆）およびロスレス（可逆）圧縮を採用しています。WebPは透明性、画像のアニメーション化、コンパクトなファイルサイズなど、多くの人気フォーマットと同様の機能を高いパフォーマンスで提供します。最近までは、WebPは広くサポートされていなかったため、フロントエンド開発者が使用するのが難しかったのですが、現在では主要なすべてのブラウザがWebPをサポートしています：Chrome、Firefox、Edge、Opera、および新しいバージョンのSafari（14+）。

WebPを使用した結果は非常に驚くべきものです。平均して、当社の顧客はこれらのフォーマットを使用して、同等のファイルサイズの画像が約半分になることを確認しました（品質の損失なし）。WebPの使用をさらに簡単にするために、imgixは自動コンテンツネゴシエーション（auto）も提供しており、これを使用すると、サポートされているブラウザにWebP（および今後追加される他の最新フォーマット）を自動的に提供することができます。

imgixが手動で出力できる画像フォーマットの完全なリスト（PJPEGやJPEG XRなどの他の最新フォーマットを含む）については、フォーマットパラメータのドキュメントを参照してください。

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

これらの新しい画像フォーマットを使用する際の課題は、それらが機能し、最も利益を提供する場合にのみ提供することに注意する必要があるということです。たとえば、WebP画像をサポートしていないブラウザに提供すると、画像が空白になります。小さな画像からプログレッシブJPEGを作成すると、実際にユーザーに多くの価値を提供せずに画像のファイルサイズが増加します。

幸いなことに、auto=formatパラメーターを使用することで、WebPのサポートを簡単な方法でサポートする問題を解決しました。利用可能なさまざまなシグナル（ヘッダー、ユーザーエージェント、画像分析など）を使用して、ユーザーにとってより良いフォーマットを選択し、それがサポートされている場合に提供します。その後、このフォーマットを提供し、画像が適切にキャッシュされるようにします。

自動コンテンツネゴシエーションを使用するには、単に画像URLにauto=formatを追加します：

Edit in Sandbox

これにより、上記の画像がサポートされているブラウザにはWebP画像として提供され、他のすべてにはJPEG（元のフォーマット）として提供されます。imgixは、画像が正しくバリエーションされ、キャッシュされることを確認します。

ロッシー画像の場合でも、使用されるフォーマットに関係なく、出力される品質を制御するために品質パラメーター（q）を使用できます。たとえば：

Edit in Sandbox

fmによるグレースフルフォールバック

autoパラメーターに加えてフォーマットパラメーター（/apis/rendering/format/output-format）を設定することで、フォールバックフォーマットを提供できます。たとえば、WebPはロッシー画像のアルファ透明性をサポートしていますが、JPEGはサポートしていません。このような場合、損失のないPNGをフォールバックとして使用してアルファ透明性を維持することができます。たとえば：

https://static.imgix.net/feature-retina.png?fm=png&auto=format (opens in a new tab)

WebPもロスレス実装をサポートしています。これにより、ロッシーな対応よりもファイルサイズが大きくなりますが、PNGよりもはるかに圧縮率が高い場合があります。画像がロスレスであることを確認するには、次のようにlosslessパラメーターを追加します：

https://static.imgix.net/feature-retina.png?fm=png&auto=format&lossless=1 (opens in a new tab)

結果と測定方法

新しいファイルフォーマット（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. その後、比較を測定して、このチュートリアルに含めた数値を導き出しました。統計的なパーセンタイルおよび平均値を含めました。