WebPは2010年にGoogleが開発した画像フォーマットで、WebM動画フォーマットで使用されているVP8ビデオコーデック技術に由来しています。JPEGとPNGの両方を一つのフォーマットで置き換えるように設計されており、写真、グラフィック、透明画像すべてに対応しています。主な成果：同等の視覚的品質でWebPファイルはJPEGより25〜35%小さく、可逆圧縮PNGより約26%小さくなります。トラフィックの多いウェブサイトでは、この差は直接的に高速なロード時間と低い帯域幅コストにつながります。

非可逆WebP：VP8コーデック

非可逆WebPは、WebMの動画フレームを圧縮する同じコーデックであるVP8を基盤としています。このルーツにより、非可逆WebPは1992年に設計されたJPEGが持っていない機能を備えています。

JPEGと同様に、非可逆WebPは周波数領域で動作します。画像ブロックを周波数係数に変換し、人間の目が最も感知しにくい高周波の詳細を破棄します。しかしJPEGが画像全体で8×8のブロックサイズを使用するのに対し、VP8は柔軟なマクロブロックベースの予測を使用します。各16×16マクロブロックをエンコードする前に、エンコーダーはすでにエンコードされた隣接ブロックに基づいてそのブロックの外観を予測し、差分（残差）のみをエンコードします。これにより、滑らかなグラデーションやテクスチャがはるかに少ないビット数で表現されます。

イントラフレーム予測 — VP8は輝度（明るさ）マクロブロックに対して、水平、垂直、DC、対角線モードを含む10の予測モードをサポートしています。JPEGには同等の予測ステップがありません。
柔軟なエントロピーコーディング — VP8は残差にハフマン符号化ではなく算術符号化を使用します。算術符号化は、画像ブロックのような相関データに対して理論的な情報エントロピー限界により近い値を達成します。
グラデーションとテクスチャの優れた処理 — 予測モードと算術符号化の組み合わせにより、VP8は同じファイルサイズでJPEGよりはるかに少ないアーティファクトで、空、肌のトーン、ぼかした背景などの滑らかなグラデーションをエンコードします。

実際には、非可逆WebPは同等の知覚品質でJPEGより25〜34%小さいファイルサイズを実現します。数千の製品画像や記事写真を配信する一般的なウェブサイトでは、WebPに切り替えることで目に見える品質変化なしに画像ペイロードを3分の1削減できます。

可逆WebP：VP8Lコーデック

可逆WebPは可逆圧縮専用に開発された別のコーデックVP8Lを使用します。VP8から派生したものではなく、PNGを置き換えるために設計されています。PNGのDeflateアルゴリズムが使用しない4つのコア圧縮変換を採用しています。

空間予測 — 各ピクセルは14の予測モードの一つを使用して、すでにエンコードされた隣接ピクセルから予測されます。実際の値と予測値の差分のみが保存されます。
色空間変換 — VP8Lは緑、赤、青チャンネルを変換して互いにより相関させ、後続の圧縮ステップをより効率的にすることができます。
カラーインデックスとパレットモード — 画像が256色未満のユニークカラーを使用する場合、VP8Lは色値をパレットインデックスに置き換えます。インデックスカラーPNGと似ていますが、より効率的なエンコードです。
LZ77逆参照とハフマン符号化 — PNGのDeflateと同様に、VP8LはLZ77を使用して繰り返しピクセルパターンを参照し、ハフマン符号化で出力を圧縮します。ただしVP8Lは上記の変換後にこれらを適用するため、はるかに規則的なデータを処理します。

累積効果として、可逆WebPファイルは平均して同等のPNGファイルより26%小さくなります。アイコン、ロゴ、UIスクリーンショット、イラストレーションなどのWebグラフィックでは、PNGから可逆WebPへの切り替えは品質損失なしに直接的な利益をもたらします。

アルファチャンネルのサポート

WebPがJPEGに対して持つ重要な利点の一つが、ネイティブアルファ透明度のサポートです。WebPは非可逆モードと可逆モードの両方でアルファをサポートしていますが、JPEGは透明度を全く保存できません。

可逆WebPでは、アルファチャンネルはRGBデータと同じVP8Lコーデックで可逆圧縮されます。非可逆WebPでは、色データは非可逆圧縮されますが、アルファチャンネルは依然としてVP8Lで可逆保存されます。これにより、クリアでアーティファクトのないエッジを維持しながら、透明画像でも非可逆WebPのファイルサイズのメリットを得られます。

PNGとの比較 — 透明WebPは、アルファを持つ同等のPNGより通常3倍小さくなります。ロゴ、製品の切り抜き、透明度のあるUI要素では、これは劇的な節約です。
JPEGとの比較 — JPEGは透明度を全く保存できません。写真にJPEG、透明アセットにPNGを使用するワークフローをWebP一つに統合でき、画像パイプラインが簡素化されます。
半透明のサポート — 完全不透明または完全透明のみをサポートするGIFとは異なり、WebPは滑らかな半透明グラデーションを持つ完全な8ビットアルファをサポートします。

WebPアニメーション

WebPはANIM（アニメーションメタデータ）とANMF（アニメーションフレーム）チャンクを使用して複数フレームを保存するアニメーションWebPコンテナフォーマットでアニメーションをサポートします。各フレームは個別の非可逆または可逆WebP画像にでき、コンテナは各フレームのタイミング、ループ回数、ブレンドモードを保存します。

アニメーションWebPはGIFに対して大きな利点を持ちます。

色深度 — GIFはフレームあたり256色に制限されています。アニメーションWebPはアルファ透明度とともに完全な24ビットカラー（1670万色）をサポートします。
ファイルサイズ — Googleの自社ベンチマークによると、アニメーションWebPファイルは非可逆で同等のGIFより64%小さく、可逆で19%小さくなります。
透明度の品質 — GIFは1ビットアルファ（オン/オフ）のみです。アニメーションWebPはフレームあたり滑らかな8ビットアルファをサポートし、クリーンなフェード効果と滑らかなエッジを実現します。

以前GIFで配信されていたWebアニメーション — ミーム、スタンプ、短いループ — には、アニメーションWebPがファイルサイズの一部ではるかに優れた品質を提供します。

非可逆WebPの品質設定

非可逆WebPはJPEGの品質に似た0から100までの品質パラメータを受け付けます。値が高いほど詳細が保持されますが、ファイルサイズが大きくなります。関係は線形ではなく、品質100から約85に下げたときに最大のファイルサイズ削減が得られます。

品質75〜85 — ほとんどのWeb画像に適したスイートスポットです。品質80では、WebPファイルは品質80のJPEGより約30%小さく、同様の視覚的出力が得られます。製品画像、記事写真、マーケティングアセットに推奨される範囲です。
品質60〜75 — 完全な忠実度が必要でないサムネイル、ソーシャルプレビュー、装飾的な背景に適しています。同等のJPEGより40〜50%小さいファイルになります。
品質90〜100 — アーカイブまたはほぼ可逆の使用向けです。ファイルは大きくなりますが、最高品質のJPEGよりまだ10〜20%小さいです。Web配信にはほとんど必要ありません。

実践的な出発点：品質80でエクスポートして視覚的に比較してください。フラットカラー領域や滑らかなグラデーションでアーティファクトが見える場合は85に上げてください。複雑なテクスチャを持つ写真では、品質75が85とほとんど区別できないことがよくあります。

ブラウザサポート

すべての主要ブラウザは2020年からWebPをサポートしています。Chromeは2011年、FirefoxとEdgeは2018年、Safariはバージョン14（macOS Big Sur、2020年リリース）でサポートを追加しました。2026年現在、グローバルWebPサポートは97%以上です。唯一の意味ある例外はMicrosoftがサポートを終了したInternet Explorerです。

非常に古いブラウザからの少数のトラフィックへの標準的なフォールバックパターンはHTML <picture>要素です。

<picture>
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="説明" />
</picture>

WebPをサポートするブラウザは<source>を使用し、古いブラウザは <img>タグにフォールバックします。実際には、ほとんどのチームがフォールバックをスキップしてWebPを直接配信するようになっています。

画像をWebPに変換する方法

既存のJPEGまたはPNG画像をWebPに変換する最も簡単な方法は、Picovertの JPGをWebPに変換ツールを使用することです。完全にブラウザ内で動作し — ファイルがサーバーにアップロードされることはありません — 数秒で変換されます。品質スライダーを調整してファイルサイズと視覚的品質のバランスを取り、個別またはZIPアーカイブとして結果をダウンロードできます。

ビルドパイプラインで画像を処理する開発者には、sharpライブラリ（Node.js）と cwebp（GoogleのCLIエンコーダー）が標準的なツールです。cwebpの使用方法：

cwebp -q 80 input.jpg -o output.webp

ディレクトリ内のすべてのJPEGを一括変換するには：

for f in *.jpg; do cwebp -q 80 "$f" -o "$(basename $f .jpg).webp"; done

実践的な推奨事項

Web開発者とコンテンツクリエーター向けの最も一般的なシナリオをカバーするガイドラインです。

すべてのWeb画像にWebPを使用する — 97%以上のブラウザサポートにより、新しいWebコンテンツにデフォルトでJPEGやPNGを使用する説得力のある理由はもはやありません。WebPはより小さいファイルと同等またはより良い視覚的品質を提供します。
オリジナルをJPEGまたはPNGで保持する — 常にソースファイルを元のフォーマットで保持してください。さらに編集するためにWebPを再エンコードすると、非可逆モードで追加の品質損失が発生します。WebPを編集フォーマットではなく配信フォーマットとして扱ってください。
写真には非可逆WebPを選択する — 以前JPEGとして保存されていたすべての画像（写真、製品画像、ヒーロー画像）は非可逆WebPに移行すべきです。Web配信には品質75〜85を使用してください。
グラフィックには可逆WebPを選択する — ロゴ、アイコン、イラスト、UIスクリーンショット、以前PNGとして保存されていたすべての画像は可逆WebPに移行すべきです。品質損失なしに小さなファイルが得られます。
クリティカルパス画像にWebPを優先する — フォールドより上に表示される画像 — ヒーロー画像、リストページの製品サムネイル — は知覚ロード時間に最大の影響を与えます。これらを最初に変換してください。
アニメーションGIFを監査する — サイト上のすべてのアニメーションGIFはアニメーションWebPまたはMP4への変換候補です。どちらも大幅なファイルサイズ削減を提供し、MP4はより長いビデオのようなアニメーションに適した選択肢です。

始めるには、フォーマット変換にPicovertの画像変換ツールを、ファイルサイズの微調整には画像圧縮ツールを使用してください。両方のツールはアカウント不要でブラウザ内で動作します。