Google PageSpeed Insightsで計測して「次世代フォーマットでの画像の配信」という指摘を受けたことがあるなら、その中身は「画像をWebPに変換しなさい」という提案でした。Googleがウェブ画像の現代的な標準とみなしているのがWebPで、そう言うだけの理由もあります。
WebPという名前の意味
WebPは、Googleが開発し2010年に公開した画像形式です。名前は Web + P （Pictureの頭文字）を組み合わせたものです。目的は最初からはっきりしていました。JPGやPNGを上回る圧縮でウェブページを軽くし、それでいて見た目の品質は落とさないことです。
非可逆圧縮しか持たないJPGや、可逆圧縮しか持たないPNGと違い、WebPは 両方の圧縮モード 、つまりロッシーとロスレスの両方を備え、さらにアルファチャンネルによる透過とアニメーションにも対応します。実質的に、JPGとPNGとGIFをひとつのファイル形式でまかなえるということです。
WebPの仕組み
ロッシーのWebPは、同じくGoogleが開発した動画コーデック VP8をもとにしています。使われているのは ブロック予測という手法です。ピクセルを1つずつ記録するのではなく、隣り合うブロックから各ブロックの値を予測し、予測と実際の値の差だけを記録します。差が小さいほど、ファイルは小さくなります。
ロスレスのWebPは独自の手法を組み合わせています。空間予測、色変換、そしてエントロピー圧縮で、後者に使われるのが LZ77＋ハフマン符号化です。その結果、同じ内容でも同等のPNGより明らかに小さい可逆ファイルになります。平均で26%減です。
WebPは本当にJPGやPNGより小さいのか
小さくなります。しかも差は小さくありません。Google自身のデータによると、次のとおりです。
| 比較 | 平均のサイズ削減 |
|---|---|
| ロッシーWebP vs JPG（同じ見た目の品質） | 25〜35%小さい |
| ロスレスWebP vs PNG（同じ品質） | 約26%小さい |
| 透過WebP vs PNG | 約22%小さい |
たとえば商品画像500点をJPGで抱えているネットショップなら、WebPに変換するだけで画像の総容量が3分の1減る計算です。しかも見た目の劣化は感じられません。
💡 SEOへの影響： Googleは読み込み速度を検索順位の要素にしています。WebP画像はCore Web Vitalsの主要指標のひとつであるLCP（Largest Contentful Paint）を短縮し、検索結果での順位に直接効いてきます。
WebPの利点
- 同じ品質でファイルが小さい： ロッシーでもロスレスでも、圧縮効率でWebPはJPGとPNGを上回ります。
- 透過に対応： PNGと同じく256段階の不透明度を持つ完全なアルファチャンネルに対応し、それでいてファイルは軽くなります。
- アニメーションに対応： アニメーションWebPはGIFの代わりになり、ファイルははるかに軽く、色の再現も上です（GIFは256色まで、WebPは数百万色）。
- ロッシーとロスレスが同じ形式に同居： 写真、ロゴ、アイコン、アニメーションまで、用途ごとに形式を変える必要がありません。
- メタデータに対応： WebPはEXIFとXMPのメタデータを扱えるので、カメラ情報、位置情報、著作権情報を保持できます。
- 主要ブラウザがすべて標準対応： Chrome、Firefox、Safari、Edge、Operaは2020年以降WebPに対応しています。
WebPの弱点
- ウェブの外では互換性が限られる： 古い画像編集ソフト、ビューアアプリ、レガシーなシステムには、いまだに標準では認識しないものが多くあります。Windows 10以前では、エクスプローラーでWebPを開くのに追加のコーデックが必要です。
- 受け付けないプラットフォームがある： LINEのようなSNSや一部のメール配信ツールは、いまだにWebPのアップロードを受け付けません。そうした場面ではJPGかPNGが必要なままです。
- 編集用途には向かない： 編集までWebPに完全対応しているプロ向けソフトはごくわずかです。作業中はRAW、TIFF、PSDで原本を持ち、最終版だけWebPに書き出すのが無難です。
- メールでは表示されない： OutlookやApple MailといったメールソフトはWebPを表示しません。メールに載せる画像はJPGかPNGにしてください。
WebP vs JPG vs PNG vs SVG — まとめて比較
| 項目 | WebP | JPG | PNG | SVG |
|---|---|---|---|---|
| 圧縮 | ロッシーとロスレス | ロッシー | ロスレス | ベクター |
| 透過 | ◯ | × | ◯ | ◯ |
| アニメーション | ◯ | × | ×※ | ◯ |
| 写真に向く | ◯ | ◯ | × | × |
| ロゴ・アイコンに向く | ◯ | × | ◯ | ◯ |
| 拡大しても劣化しない | × | × | × | ◯ |
| ファイルサイズ | 非常に小さい | 小さい | 中〜大 | 非常に小さい |
| 対応範囲 | 現代のブラウザ | ほぼすべての環境 | ほぼすべての環境 | 現代のブラウザ |
※ アニメーションPNG（APNG）も存在しますが、対応環境は限られます。
WebPを使う場面
現代的なサイトやWebアプリに表示する画像の大半では、WebPが最善の選択です。
- ECサイトの商品写真： JPGと同じ見た目のまま25〜35%軽くなり、品質を落とさずに表示が速くなります。
- バナーやメインビジュアル： 画像の重さがLCPとユーザー体験に直接響く場所です。
- 透過のロゴ・アイコン： アルファチャンネルに完全対応したまま、PNGより軽いファイルで置き換えられます。
- ブログやポートフォリオの画像： 軽くなり、見た目は変わらず、PageSpeedのスコアも改善します。
- アニメーションGIFの置き換え： アニメーションWebPはファイルがはるかに軽く、色の再現もGIFより格段に上です。
逆に、メールに添付する画像、WebPを受け付けないSNSへの投稿、これから編集する作業用ファイルにはWebPを避け、JPGかPNGのままにしておきましょう。
古いブラウザ向けにフォールバックを用意するには
現代のブラウザはすべてWebPに対応していますが、念のためJPGかPNGのフォールバックを用意しておくのが実務的です。HTMLでは次のタグを使います。 <picture>:
こうしておけば、WebPに対応したブラウザは軽いほうを読み込み、そうでないブラウザは自動的にJPGかPNGを読み込みます。幅広い互換性が必要なサイトに対して、Googleが推奨しているやり方です。