WebP vs AVIF vs JPEG: Which Image Format Should You Use? - PIC0.ai

私が画像フォーマットに対する考え方を変えた$47,000のミス

私はサラ・チェンで、中規模のeコマースプラットフォームでパフォーマンスエンジニアを8年間務めています。昨年、私は会社に$47,000の損失をもたらす決定を下しました。それは、ユーザーベース全体で適切にテストすることなく、製品カタログ全体—18万枚以上の画像をJPEGからWebPに変更したことです。その結果、古いiOSデバイスのユーザーから、私たちの製品の代わりに壊れた画像を見ることによって、直帰率が23%増加しました。

この高価な教訓は、私に重要なことを教えました。画像フォーマットを選ぶことは「最適な」ものを選ぶことではありません。トレードオフを理解し、それらを特定のオーディエンスやユースケースに合わせることが重要です。今日は、47か国にわたるユーザーに毎日230万画像を提供するプラットフォームの画像配信を管理して学んだことをすべて共有します。

画像フォーマットの状況は劇的に進化しました。私がこの分野に入ったとき、JPEGは写真において揺るぎない王者であり、PNGが他のすべてを扱っていました。今ではWebP、AVIF、JPEG XL、そして他のさまざまなフォーマットが存在しており、それぞれがより良い圧縮と品質を約束しています。しかし、ほとんどの記事が言わないことがあります。「最良の」フォーマットは、あなたの特定の制約—オーディエンスのデバイス、サーバーインフラ、開発リソース、パフォーマンス目標—によって完全に異なるのです。

今日は、ウェブ使用において最も実用的な3つのフォーマットを分解します：JPEG（信頼のおけるベテラン）、WebP（現実的な中間地帯）、AVIF（最先端の新参者）。私たちの生産環境からの実際の数字を共有し、各フォーマットがいつ適切かを説明し、あなた自身のプロジェクトのためにこの決定を下すためのフレームワークを提供します。最後には、どのフォーマットを選ぶべきかだけでなく、その理由や、私が犯した高価なミスを繰り返さずに実装する方法も理解できるようになります。

基本を理解する: これらのフォーマットが実際にどのように機能するか

比較に入る前に、実際に何について話しているのかを明確にしましょう。画像フォーマットは単なる異なるファイル拡張子ではなく、視覚情報を保存し圧縮するための根本的に異なるアプローチを表しています。これらの違いを理解することは、サイトのパフォーマンス、ユーザーエクスペリエンス、さらにはサーバーコストに直接影響を与えるため、重要です。

画像フォーマットを選ぶことは「最適な」ものを選ぶことではなく、トレードオフを理解し、それらを特定のオーディエンスやユースケースに合わせることです。

JPEGは1992年に開発され、離散コサイン変換に基づく非可逆圧縮を使用します。簡単に言うと、8x8ピクセルのブロックで画像を分析し、人間の目が気づきにくい情報を捨てます。これが、JPEGが段階的な色の遷移のある写真に優れている理由ですが、鋭いエッジやテキストには苦手です。30年以上経った今でも、JPEGは最も普遍的にサポートされているフォーマットです—私はJPEGを表示できないデバイスやブラウザに出会ったことがありません。この普遍的な互換性は、グローバルなオーディエンスにサービスを提供する際にその価値があるのです。

WebPは2010年にGoogleによって導入され、ウェブ専用に設計されています。非可逆圧縮と可逆圧縮の両方、さらに透過性とアニメーションをサポートしています。非可逆圧縮は予測コーディングを使用します。この方法では、隣接するピクセルを見て、あるピクセルがどのようになるべきかを予測し、その違いだけを保存します。私たちのテストでは、WebPは通常、同等の視覚品質でJPEGよりも25-35%小さいファイルサイズを実現します。このフォーマットは2020年ごろに本格的に普及し始め、Safariがサポートを追加したことで、すべての主要なブラウザでカバーされるようになりました。

AVIF（AV1画像ファイルフォーマット）は、2019年に標準化された最新のプレーヤーです。AV1ビデオコーデックに基づいており、コンテンツ適応変換や高度な予測モードなど、非常に洗練された圧縮技術を使用しています。私たちのベンチマークでは、AVIFファイルは通常、同等のJPEGよりも40-50%小さく、WebPよりも20-30%小さいです。でも問題は、エンコードとデコードには計算リソースを多く消費し、ブラウザサポートは増えているものの、まだ普遍的ではないことです。

私たちの製品カタログからの具体的な例を挙げましょう：1200x800ピクセルの製品写真がJPEGで245KBの場合、WebPでは178KB（27%削減）、AVIFでは142KB（42%削減）になります。その節約は何千枚もの画像にわたって累積します。私たちのプラットフォームでは、JPEGからWebPに切り替えることで毎月約4.2TBの帯域幅が節約されました。それは$1,340のCDNコスト削減に変わり、人生を変えるほどではありませんが、無視できない額でした。

ブラウザサポート: あなたに必要な現実チェック

ここが理論が現実と出会う場所であり、私が$47,000のミスをしたところです。ブラウザサポートは二元的ではなく、「サポートされている」か「サポートされていない」だけではありません。それは、部分サポート、バージョン固有のクオirk、そして微妙にサイトを壊す可能性のあるエッジケースの複雑な状況です。

先月の2.1百万セッションに基づく私たちの最新データによると、次のことが分かります：JPEGは100%のサポートがあり、明らかです。WebPは私たちのユーザーベースで96.8%のサポートがあります。その反映されていない3.2%は、主に古いiOSデバイス（iOS 14以前）や、一部の企業環境における古いブラウザにいた約67,000の月間ユーザーを表しています。AVIFは73.4%のサポートがあります。つまり、私たちのユーザーの4分の1以上が、AVIF画像をネイティブに見ることができません。

しかし、私にとって高くついたニュアンスがあります。「サポートされている」と簡単に言うことができるとしても、実装の品質はばらつきがあります。私たちは、Chrome 85-89を実行している一部のAndroidデバイスがWebP画像を4メガピクセル以上で解読する際に失敗することがあることを発見しました—壊れた画像アイコンが表示されるだけでした。これは、0.5%未満のユーザーに影響を与えましたが、eコマースでは、これが販売と直帰の違いを生むのです。

解決策は、ピクチャー要素を使用したプログレッシブエンハンスメントです。私たちの高価な教訓の後に実装したのは次のとおりです：

AVIFをサポートしているブラウザに提供し（最大限の帯域幅を節約）、次にWebPをサポートしているブラウザにフォールバックし、最後にJPEGを普遍的なフォールバックとして提供します。このアプローチは実装の複雑さを増しましたが、私たちにとっては最良の方法となりました。私たちの画像配信コードは、サポートを確認し、各ブラウザが扱える最も効率的なフォーマットを提供します。

1つの重要な洞察：グローバルなブラウザ統計を確認するだけでなく、実際のユーザーベースを分析してください。私たちのオーディエンスはやや高齢で、たくさんの企業ユーザーが含まれているため、高齢のブラウザの使用が若い層をターゲットにしたサイトよりも多いのです。ゲームサイトやテックブログは85%+のAVIFサポートを持っているかもしれませんが、政府サービスサイトは60%しかないかもしれません。あなたの状況は全く異なるでしょう。

フォーマット特有のエラー率を監視することも学びました。私たちはフォーマットごとに画像の読み込み失敗を追跡するためのログを設置しましたが、これにより先ほど言及したAndroidのWebPの問題が明らかになりました。その監視がなければ、私たちは理解せずにコンバージョンを失い続けていたでしょう。今では、画像が読み込まれるだけでなく、それらがどのくらいの時間でデコードされるかも追跡しています—技術的にサポートされているとされるフォーマットでも、中レベルの電話で800msかかる場合は、実際には「サポートされている」とは言えません。

ファイルサイズと品質: 実際に重要な数字

皆が気にしている指標について話しましょう：これらのファイルは本当にどれだけ小さくなっていますか？私は私たちの製品カタログ全体で数千の変換を実行しており、実際の数字をお伝えします—理論的なベンチマークではなく、生産画像からの実際の結果です。

「最適な」フォーマットは、あなたの特定の制約によって完全に異なります：あなたのオーディエンスのデバイス、あなたのサーバーインフラ、あなたの開発リソース、あなたのパフォーマンス目標。

写真コンテンツ（私たちの製品画像、ライフスタイルショット、ヒーロー画像）の場合、一貫して見ることができるのは：質の高いJPEGで品質レベル85（私たちの基準）から始め、同等の視覚品質でWebPに変換するとファイルサイズが24-32%削減されます。AVIFに変換すると38-48%減少します。これらは小さな差ではありません—私たちの18万点の製品画像全体で、JPEGからAVIFに切り替えると約...