WebP Format: Why It Matters and When to Use It — pic0.ai

私が深刻な問題に気づいた瞬間を今でも覚えています。それは2019年のことで、私は急成長しているeコマースプラットフォームのフロントエンドチームをリードしていました。私たちのモバイルコンバージョン率は急落しており、四半期ごとに23%下がっていました。そして、分析によるとユーザーは画像が読み込まれる前に商品ページを離脱していることがわかりました。私たちは高品質なJPEGやPNGを提供しており、従来の知恵に従って「正しい」ことはすべて行っていましたが、Core Web Vitalsのスコアはひどいものでした。そこで私はWebPを発見し、ウェブパフォーマンスについての考え方が根本的に変わりました。

私はマーカス・チェンで、過去12年間にわたり、スクラッピーなスタートアップからフォーチュン500企業まで、ウェブパフォーマンスの最適化に取り組んできました。シニアパフォーマンスエンジニアおよびコンサルタントとして、私は400以上のウェブサイトを分析し、その総帯域幅消費を年間約847テラバイト削減しました。今日は、WebPについて私が学んだすべてのことを共有したいと思います。文書で見つけることができる技術的な仕様だけでなく、数十の本番環境での実装から得られた現実の洞察も含めて。

WebP革命：ただの画像フォーマット以上のもの

WebPは新しいものではありません—Googleは2010年にリリースしましたが、実際に生産利用に適したものになったのはここ数年のことです。WebPを特別にしているのは、単なる一つの機能ではなく、他のいかなる単一フォーマットも提供しない能力の組み合わせです。WebPは、劣化圧縮と非劣化圧縮をサポートし、透明性（PNGのように）やアニメーション（GIFのように）もサポートしていながら、従来のフォーマットよりもはるかに小さいファイルサイズを提供します。

私のテストからの具体的な数字を示しましょう。最近のファッション小売業者のプロジェクトで、彼らの商品カタログ全体—約45,000枚の画像—をJPEGからWebPに変換しました。結果は驚くべきものでした：平均ファイルサイズが34%減少し、品質の劣化は見られませんでした。以前は850KBのPNGで透明性のあるヒーロー画像が、WebPファイルとして312KBにまで減少しました。これは63%の削減です。モバイルネットワークのユーザーにとっては、商品ページの読み込みが平均で2.8秒早くなりました。

しかし、本当に重要なのは、その速度向上が17%のモバイルコンバージョン増加と28%のバウンス率の低下につながったことです。クライアントにこれらの数字を示すと、彼らはしばしば最良のケースシナリオを選び取っていると考えます。そうではありません。これらの結果は、WebPが正しく実装されたときの典型的なものです。このフォーマットの効率性は、JPEGやPNGで使用されているアルゴリズムよりもデータをよりインテリジェントに圧縮するために、ピクセルパターンを分析する予測コーディングの使用によるものです。

WebPはまた、プログレッシブレンダリングをサポートしており、これは画像が読み込まれる際に段階的に表示されることを意味します—プログレッシブJPEGのように、しかしより効率的です。これにより、実際のロード時間がわずかに改善された場合でも、より良い見込みのパフォーマンスが生まれます。ユーザーエクスペリエンステストでは、参加者はプログレッシブWebP画像を使用したページを、標準のJPEGを使用した同一ページよりも「速く感じる」と一貫して評価しました。実際のロード時間の差は200ミリ秒未満でした。

WebPの技術的利点の理解

WebPを真に評価するためには、その背後で何が起きているかを理解する必要があります。WebPは、ビデオ圧縮から借りた技術の組み合わせを使用しています—特にVP8ビデオコーデックです。これは懸念されるかもしれません（なぜ静止画像にビデオ圧縮を使用するのか？）、しかしこれは実際には素晴らしいのです。ビデオコーデックは、視覚情報を効率的に圧縮しながら品質を維持するように設計されており、その原則は静止画像にも美しく適用されます。

WebPは単に小さいファイルについてではなく、ユーザーが期待する同じ視覚的品質を提供しつつ、彼らの帯域幅、バッテリー寿命、忍耐を尊重することです。2024年において、それはオプションではなく、基本条件です。

WebPの劣化圧縮はブロック予測を使用しており、エンコーダは周囲のブロックに基づいて各ブロックの内容を予測し、差分だけを保存します。これは、JPEGのアプローチ（画像を8x8のブロックに分割し、各ブロックを独立して圧縮する）よりもはるかに効率的です。実際には、WebPはJPEGと同じ視覚的品質を25-35%小さいファイルサイズで実現したり、同じファイルサイズでさらに優れた品質を実現したりできます。

非劣化圧縮については、WebPは空間予測、色空間変換、エントロピーコーディングを含む技術の組み合わせを使用しています。私のテストでは、非劣化のWebPファイルは通常、同等のPNGファイルよりも26%小さいです。これは、テキスト、ロゴ、シャープなエッジを持つ画像に特に価値があります。なぜなら、劣化圧縮では目に見えるアーティファクトを導入するからです。

十分な注目を浴びていない機能の一つは、WebPのアルファチャネル圧縮です。PNGが透明度データを未圧縮または基本的な圧縮で保存するのに対し、WebPはアルファチャネルに対して色データとは別に洗練された圧縮を適用します。最近のプロジェクトで透明性のあるUI要素を扱った際、アルファチャネルが多い画像が420KB（PNG）から89KB（WebP）に減少しました—これは79%の削減です。これは、透明なオーバーレイや複雑なレイヤリングにますます依存している現代のウェブデザインにとって画期的です。

また、WebPはアニメーションをサポートしており、ここが本当に興味深いポイントです。アニメーションWebPファイルは通常、同等のGIFよりも64%小さいですが、24ビットカラーをサポートしています（GIFは256色に制限されています）。最近、クライアントのアニメーションロゴをGIFからWebPに変換しました。GIFは2.4MBで、目に見える色帯域があり古く見えました。WebP版は890KBで、滑らかで現代的なカラーグラデーションでした。何百万ものページビューに対する帯域幅の節約はかなりのものでしたが、改善されたブランド認識も同様に価値がありました。

WebPが最も影響を与える時

すべての画像がWebP変換の恩恵を受けるわけではなく、使用時期を理解することがその価値を最大限に引き出すために重要です。広範なテストを通じて、WebPが卓越した結果をもたらすいくつかのシナリオを特定しました。

eコマースの商品画像は、もしかすると理想的な使用例かもしれません。これらの画像は、製品を効果的に展示するために高品質である必要がありますが、多数あります—典型的な商品は5-12枚の画像を持っています。最近、家具小売業者のプロジェクトで、彼らの平均商品ページには8.2MBの画像が含まれていました。WebPに変換したところ、これは3.1MBに減少しました—62%の削減です。ページの読み込み時間は、シミュレーションされた3G接続で8.7秒から3.2秒に改善されました。さらに重要なのは、画像は依然として鮮明で詳細に見え、購入決定に必要な視覚的品質を維持していたことです。

ヒーロー画像やファーストビューのコンテンツも、もう一つの重要な候補です。これらの画像は、ユーザーが最初に見るものであるため、知覚されるパフォーマンスに大きな影響を与えます。私は、SaaS企業のホームページでのヒーロー画像が1.8MBのJPEGであった事例で作業しました。これをWebPに変換したところ、サイズは620KBに減少し、目に見える品質の損失はありませんでした。この単一の変更で、彼らのLargest Contentful Paint（LCP）スコアは4.2秒から1.8秒に改善され、GoogleのCore Web Vitals評価で「貧弱」から「良好」へと移行しました。

レスポンシブ画像もWebPから非常に多くの恩恵を受けます。異なる画面解像度に対して複数の画像サイズを提供する場合、帯域幅の節約が掛け算されます。私が最適化したニュースサイトでは、各記事の画像を4つの異なるサイズ（モバイル、タブレット、デスクトップ、高DPI）で提供していました。すべてのバリアントをWebPに変換したところ、総画像帯域幅を41%削減でき、月間2.3テラバイトのデータを少なく提供できました。CDNの料金で、これにより約4,800ドルのコストを節約しました。