WebP画像の特徴：圧縮、対応環境、フォールバック

Webページでは、大きな画像が転送量や表示速度に直結します。画像形式を選ぶときは、見た目だけでなく、圧縮後の容量、ブラウザ対応、デコード負荷、代替形式の用意まで考える必要があります。

WebPは、非可逆圧縮と可逆圧縮に加えて、透過とアニメーションにも対応するWeb向け画像形式です。この記事では仕組みを簡潔に確認し、JPEG、PNG、AVIFとの使い分けと実装方法を整理します。

フォーマットの誕生#

Googleは2010年、Web向けの画像形式としてWebPを発表しました。当時広く使われていたJPEG、PNG、GIFはそれぞれ得意分野が異なり、写真、透過、アニメーションを一つの形式で扱うことはできませんでした。

WebPの非可逆圧縮には、動画コーデックVP8で使われていた技術が応用されています。周囲の画素から内容を予測し、予測との差分を記録することで、静止画のデータ量を抑えます。

実際の圧縮率は画像と設定によって変わりますが、同程度の見た目を保ったままJPEGやPNGより小さくできる場合があります。転送量を減らせれば、画像の多いページや通信環境が限られる端末で表示時間を短縮しやすくなります。

WebPがより小さなファイルを実現する方法#

WebPでは、複数の圧縮技術を組み合わせて、画質とファイルサイズのバランスを取ります。

予測コーディングでは、周囲の画素から現在の画素を予測し、実際の値との差分を記録します。差分が小さければ、必要なデータ量も少なくなります。

変換コーディングでは、画素ブロックを数学的に変換し、情報を少数の係数へまとめます。非可逆モードでは、人が気づきにくい細部を減らして容量を抑えます。

エントロピーコーディングでは、出現頻度の高い値を短く、低い値を長く表現し、データを効率よく格納します。

量子化の調整では、細部の多い領域と平坦な領域で情報量を調整します。ただし、画質の感じ方は画像によって異なるため、公開前に実際の出力を確認することが重要です。

JPEG・PNG・GIFとの違い#

画像形式にはそれぞれ得意分野があります。WebPも常に最小になるわけではないため、元画像の種類と利用先に合わせて選びます。

JPEGとの比較#

JPEGは写真に広く使われており、対応環境も非常に広い形式です。WebPの非可逆モードは、同程度の見た目でJPEGより小さくなる場合があります。一方、圧縮を強くするとWebPでも劣化は起こるため、用途に合う品質設定が必要です。

WebPは、JPEGが扱えない透過とアニメーションにも対応します。写真に透過が必要な場合や、複数フレームを一つの画像ファイルで配信したい場合に選択肢となります。

PNGとの比較#

PNGは、ロゴ、アイコン、スクリーンショットなど、輪郭が明確な画像に向いています。WebPにも可逆モードがあり、同じ画素を保持しながらPNGより小さくなる場合があります。実際の差は画像の色数や模様によって変わります。

写真をPNGで保存すると容量が大きくなりやすいため、WebPの非可逆モードやJPEG、AVIFも比較します。ただし、文字や細い線を含む画像では、非可逆圧縮によるにじみが目立つことがあります。

GIFとの比較#

GIFはアニメーション画像として今も使われていますが、1フレームあたり256色という制限があります。アニメーションWebPはより多くの色とアルファ透過を扱え、GIFより容量を抑えられる場合があります。

ただし、画像を受け取るサービスやメールクライアントによってはWebPを扱えないことがあります。Webサイト以外へ配布するときは、相手側の対応形式を確認してください。

WebPが向いている場面#

まず容量の大きい画像から試すと、導入効果を確認しやすくなります。

メイン画像や大きな写真は、削減できる容量が大きくなりやすい対象です。ファーストビューの画像を軽くすると、Largest Contentful Paint（LCP）の改善につながる場合があります。

商品一覧やサムネイルでは、1枚ごとの差が小さくても、ページ全体では転送量を減らせます。

画像の多いブログやニュースサイトでも、記事単位の総転送量を抑えられます。モバイル回線での閲覧が多いサイトでは特に確認する価値があります。

Webアプリ内の画像では、配信先のブラウザを把握しやすいため、WebPを採用しやすくなります。

代替案を検討すべき場合#

WebPが常に正しい選択とは限りません。一部のコンテキストでは異なるフォーマットが適切です。

メールキャンペーンはまだWebPサポートに苦戦しています。多くのメールクライアントはWebP画像を削除または表示に失敗します。サポートが改善されるまで、メールコンテンツにはJPEGとPNGを使用してください。

印刷ワークフローは最大品質の保存が必要です。印刷用の画像にはTIFFまたはPNGを使用してください。WebPの有損圧縮は高解像度印刷で見えるアーティファクトを導入する可能性があります。

ベクターグラフィックスはSVGのままであるべきです。SVGをWebPに変換すると、SVGを価値あるものにする無限のスケーラビリティと編集可能性が犠牲になります。目的地が本当にそれを必要とする場合にのみSVGをラスタライズしてください。

レガシーシステム統合は時として特定のフォーマットを要求します。CMS、パートナーAPI、または下流プロセスがJPEGまたはPNGを必要とする場合、それらの要件に対応してください。

プロダクションでのWebP実装#

主要な現行ブラウザはWebPに対応しています。それでも、メールや外部サービスへの配布を含む場合はフォールバックを用意します。

Picture要素アプローチ#

HTMLの <picture> 要素を使うと、WebPと代替形式を併記できます。

<picture>
  <source srcset="hero.webp" type="image/webp">
  <source srcset="hero.jpg" type="image/jpeg">
  <img src="hero.jpg" alt="ヒーロー画像" loading="lazy">
</picture>

ブラウザは対応する <source> を上から選び、WebPを選べない場合はJPEGへ進みます。最後の <img> はフォールバックであると同時に、画像の代替テキストやサイズ指定を持つ要素です。

CSS背景画像#

背景画像では、CSSの image-set を使って候補を指定できます。

.hero {
  background-image: url('hero.jpg');
  background-image: image-set(
    url('hero.webp') type('image/webp'),
    url('hero.jpg') type('image/jpeg')
  );
}

ブラウザはサポートするフォーマットを選択します。image-set 自体がサポートされていない場合、最初の宣言がフォールバックを提供します。

ビルド時自動化#

手動変換はスケールしません。現代のビルドパイプラインはWebP生成を自動化します。Webpack、Rollup、その他のバンドラー用に同様のプラグインが存在します。WordPressのようなCMSは、アップロードされた画像のWebPバージョンを自動的に生成するプラグインを提供しています。

CDNレベル変換#

画像変換機能を持つCDNでは、リクエストに応じてWebPを生成・配信できる場合があります。利用できる形式、キャッシュキー、料金はサービスごとに確認してください。

影響の測定#

WebPを導入したら、変換できたことだけで終わらせず、次の項目を前後で比較します。

ファイルサイズは、代表的な画像だけでなく、画像ライブラリ全体で集計します。

**Largest Contentful Paint（LCP）**は、ヒーロー画像やアボーブザフォールドコンテンツがWebPに変換されるとしばしば改善されます。このCore Web Vitalを前後で追跡します。

ページ全体の転送量は、画像以外のリソースも含めて確認します。

離脱率とエンゲージメントメトリクスは、ページがより速くロードされるにつれて改善する可能性がありますが、多くの要因がこれらに影響します。

将来を見据えて#

Web向けの画像形式にはAVIFなどの選択肢もあります。AVIFは写真で高い圧縮効率を得られる場合がありますが、エンコード時間や利用するツール、配信先の対応状況も考慮が必要です。

WebPは、圧縮効率、対応環境、制作ツールのバランスを取りやすい形式です。ただし、一つの形式へ固定せず、画像ごとにJPEG、PNG、WebP、AVIFを比較できる運用にしておくと変更へ対応しやすくなります。

画像形式は今後も変わるため、特定の拡張子に処理を固定しない方が運用しやすくなります。自動変換、フォールバック、表示速度の計測を分けて設計しておけば、新しい形式も段階的に追加できます。

導入手順#

既存サイトへ導入するときは、次の順序で小さく試します。

まずは容量の大きいメイン画像、バナー、記事画像から試すと、転送量の変化を確認しやすくなります。

ビルドパイプラインまたはCDNで生成を自動化します。手動変換はメンテナンスの負担を生み出し、画像の見落としリスクがあります。

必要に応じて <picture> 要素やCSSの image-set で代替形式を指定します。

導入後はファイルサイズとページ指標を測り、画質や表示速度が想定どおりか確認します。

WebPは導入しやすい選択肢ですが、効果は画像と配信方法によって異なります。元画像を残し、画質、容量、表示速度を測りながら段階的に導入してください。

フォーマット変換が必要ですか？無料SVGからPNGへの変換ツールは、ブラウザ内で画像変換を処理します。ベクターフォーマットを詳しく知りたい場合は、SVG画像フォーマット完全ガイドをご覧ください。