WebP（拡張子 .webp）は、Google が 2010 年 9 月 30 日に発表した画像形式です。2024 年 11 月には IETF の RFC 9649 として仕様が文書化され、メディアタイプ image/webp が登録されました。1 つの形式で、JPEG のような非可逆圧縮、PNG のような可逆圧縮、透過（アルファチャンネル）、GIF のようなアニメーションを扱えます。
「JPEG や PNG より軽い」とよく紹介されますが、Google が公表している数字は平均値です。WebP Lossy Study では同じ SSIM で JPEG より 25〜34% 小さく、FAQ では可逆 WebP は PNG より 26% 小さいとしています。この記事では WebP の中身を確認したうえで、写真、日本語の画面スクリーンショット、文字の多い一覧表を実際に変換し、小さくなる画像とならない画像を数字で示します。
WebPとは：1 つの形式に 2 つの圧縮方式
WebP ファイルは RIFF という入れ物の中に「チャンク」と呼ばれる区画を並べた構造です（WebP Container Specification）。画素データがどのチャンクに入っているかで、非可逆か可逆かが決まります。
| チャンク | 中身 | ポイント |
|---|---|---|
VP8 （末尾は半角スペース） | 非可逆の画像 | 動画コーデック VP8 のキーフレーム。色は Y’CbCr 4:2:0 だけで、色差は縦横とも半分の解像度で記録される（FAQ） |
VP8L | 可逆の画像 | WebP 独自の可逆圧縮。RGBA で、透過も含む |
ALPH | 非可逆画像の透過情報 | 写真を非可逆にしても、透過部分は既定で可逆のまま保存される |
VP8X | 拡張機能のフラグとキャンバスサイズ | ICC プロファイル、透過、Exif、XMP、アニメーションを使うときに付く |
ANIM / ANMF | アニメーションの設定と各フレーム | フレームごとに非可逆と可逆を混ぜられる |
ICCP・EXIF・XMP | カラープロファイルとメタデータ | 省略可 |
幅と高さは 14 ビットで記録されるため、最大サイズは 16383 × 16383 ピクセルです（FAQ）。JPEG のプログレッシブ表示に当たる機能はなく、FAQ では代わりに「インクリメンタルデコード」を挙げています。
拡張子が同じ .webp でも、非可逆か可逆かはファイル名からは分かりません。libwebp に含まれる webpinfo でチャンクを表示すると確認できます。下は、後述の画面スクリーンショットを本サイトの WebP 変換ツール（Chrome、品質 85）で変換したファイルの結果です。
$ webpinfo ja-shot.webp
File: ja-shot.webp
RIFF HEADER:
File size: 66640
Chunk VP8X at offset 12, length 18
ICCP: 1
Alpha: 0
EXIF: 0
XMP: 0
Animation: 0
Canvas size 2044 x 1190
Chunk ICCP at offset 30, length 464
Chunk VP8 at offset 494, length 66146
Width: 2044
Height: 1190
Alpha: 0
Animation: 0
Format: Lossy (1)
No error detected.VP8 があるので非可逆です。透過のない画像なのに VP8X と ICCP が付いているのは、Chrome の canvas エンコーダーが 456 バイトのカラープロファイル（チャンク見出しを含めて 464 バイト）を必ず書き込むためです。同じ画像を cwebp -q 85 で変換すると VP8 チャンクだけの 65,812 バイトになりました。
JPEG・PNG・GIF との違い
| 項目 | WebP | JPEG | PNG | GIF |
|---|---|---|---|---|
| 非可逆圧縮 | ○（VP8） | ○ | × | × |
| 可逆圧縮 | ○（VP8L） | × | ○ | ○（256 色まで） |
| 透過 | ○（8 ビット） | × | ○ | 1 ビット（透明か不透明か） |
| アニメーション | ○ | × | APNG のみ | ○ |
| 非可逆時の色の記録 | 4:2:0 固定 | 4:4:4 なども選べる | — | — |
| 最大サイズ | 16383 × 16383 | 65535 × 65535 | 2^31 − 1 | 65535 × 65535 |
JPEG と違って非可逆 WebP は色差を必ず間引くため、赤い細字や色付きの細線は輪郭がにじみやすくなります。cwebp -sharp_yuv は RGB から YUV への変換を遅いけれど正確な方法に切り替えるオプションで、こうした画像で試す価値があります。
実測：写真・日本語スクリーンショット・一覧表
2026 年 10 月 2 日に、cwebp 1.6.0（macOS、Homebrew）と本サイトの WebP 変換ツール（Chrome 152 の canvas.toBlob()）で 3 枚の画像を変換しました。PSNR は dwebp で復号した画素を元画像と比べた値で、大きいほど元に近く、「可逆」は全画素が一致したことを表します。
写真： Kodak のテスト画像 kodim14.png（768 × 512、692,201 バイト、SHA-256 55a94550…0ba6e）。
| 出力 | バイト数 | PNG 比 | PSNR |
|---|---|---|---|
| JPEG（sharp 0.34.5、品質 85） | 112,852 | −83.7% | 34.63 dB |
cwebp（既定の -q 75） | 67,054 | −90.3% | 33.68 dB |
cwebp -q 85 | 100,676 | −85.5% | 36.47 dB |
| 本サイトのツール、品質 85（既定） | 101,000 | −85.4% | 36.46 dB |
cwebp -lossless | 518,266 | −25.1% | 可逆 |
| 本サイトのツール、品質 100 | 556,092 | −19.7% | 可逆 |
品質 85 同士で比べると、WebP は JPEG より 10.8% 小さく、PSNR は 1.84 dB 高くなりました。可逆の cwebp -lossless は PNG より 25.1% 小さく、Google の「26%」に近い結果です。
日本語の画面スクリーンショット： 本サイトの日本語版 WebP 変換ツールのページを撮った PNG（2044 × 1190、197,067 バイト）。見出し「WebP 変換器」や説明文の細い漢字が並ぶ、ブログや社内マニュアルに貼る典型的な画像です。
| 出力 | バイト数 | PNG 比 | PSNR |
|---|---|---|---|
| JPEG（sharp、品質 85） | 136,519 | −30.7% | 43.65 dB |
cwebp（既定の -q 75） | 52,144 | −73.5% | 43.82 dB |
cwebp -q 85 | 65,812 | −66.6% | 46.09 dB |
| 本サイトのツール、品質 85 | 66,640 | −66.2% | — |
cwebp -lossless | 76,730 | −61.1% | 可逆 |
cwebp -z 9（最も遅い可逆設定） | 73,542 | −62.7% | 可逆 |
| 本サイトのツール、品質 100 | 267,920 | +36.0% | — |
スクリーンショットは WebP が最も効いた画像です。cwebp 既定の -q 75 は、PSNR がほぼ同じ JPEG の 4 割以下の大きさでした。可逆でも PNG より 6 割小さくなっています。
ツールの 2 行に PSNR がないのは、このスクリーンショットに ICC カラープロファイルが埋め込まれていたためです。ブラウザは canvas に描く時点で色を sRGB に変換するので、出力の画素値は元の PNG と最大 17 段階ずれ、品質 100 でも「元と同じ画素」にはなりません（色の見え方を合わせるための変換です）。反対に cwebp は既定（-metadata none）でプロファイルを捨てて画素値だけを符号化するので、sRGB 以外のプロファイルが付いた画像は表示色が変わる可能性があります。プロファイルを残すには cwebp -metadata icc を指定します。
文字の多い一覧表： 本サイトのNATO フォネティックコードのページに載せている一覧表 nato-phonetic-alphabet-ja.png（1120 × 2020、16 色パレットの PNG、66,664 バイト）。
| 出力 | バイト数 | PNG 比 |
|---|---|---|
cwebp（既定の -q 75） | 78,804 | +18.2% |
| 本サイトのツール、品質 85 | 102,454 | +53.7% |
| 本サイトのツール、品質 100 | 82,628 | +23.9% |
| sharp の既定（品質 80） | 88,940 | +33.4% |
cwebp -lossless | 55,210 | −17.2% |
sharp lossless: true | 53,514 | −19.7% |
cwebp -z 9 | 52,090 | −21.9% |
色数の少ない図表は、非可逆 WebP にすると大きくなりました。少ない色をパレットで持つ PNG のほうが有利な画像で、文字の縁もにじみます。小さくできたのは可逆 WebP だけです。また、ツールの品質 100（Chrome の可逆エンコーダー）は 3 枚とも cwebp -lossless より大きく、図表とスクリーンショットでは元の PNG さえ上回りました。図やロゴを可逆で変換するときは cwebp -lossless か -z 9 を使い、PNG と大きさを比べてから置き換えるのが確実です。
WebPにしても小さくならない・困るケース
- 色数の少ない図表・ロゴ： 上の一覧表のとおり、非可逆では大きくなることがあります。可逆で変換し、小さいほうを使います。
- 既に JPEG になっている写真の再変換： 劣化が重なります。元の PNG やカメラの原本があればそちらから変換します。
- Exif・GPS 情報：
cwebpは既定でメタデータをコピーしません（-metadataの既定はnone）。本サイトのツールも Exif と XMP を書き出しません。撮影日時を残したいなら-metadata exifを付け、位置情報を消したいなら既定のままで構いません。 - アニメーション GIF： 本サイトのツールは画像を canvas に 1 回描くだけなので、最初のフレームだけの静止画になります。アニメーションを保ったまま変換するには libwebp の
gif2webpを使います。 - Safari で変換したい： WebP の表示と作成は別の機能です。MDN の互換性データ（BCD 8.1.4）では、
canvas.toBlob()での WebP 書き出しは Chrome 50、Edge 79、Firefox 96 が対応し、Safari はどのバージョンも未対応です。Safari では本サイトのツールは PNG を.webpとして保存せず、エラーを表示します。
対応状況：ブラウザ・WordPress・PageSpeed Insights
caniuse の WebP（2026 年 10 月 1 日時点のデータ）では、全面対応しているブラウザの利用率は世界全体で 96.74% です。
| ブラウザ | 全面対応 | それ以前 |
|---|---|---|
| Chrome | 32 | 9〜22 は非可逆のみ、23〜31 はアニメーションなし |
| Edge | 18 | — |
| Firefox | 65 | — |
| Safari（macOS） | 16.0 | 14.0〜15.6 も全面対応だが macOS 11 Big Sur 以降が必要 |
| Safari（iOS） | 14.0 | — |
| Samsung Internet | 4 | — |
古い Mac でも、Safari 14〜15 なら macOS 11 Big Sur 以降であれば表示できます。社内に macOS 10.15 以前の Mac が残っている場合は、<picture> で JPEG や PNG を併記しておきます（後述）。
WordPress： WordPress 5.8（2021 年）で WebP 画像をアップロードして使えるようになりました。ただし公式の開発者ノート「WordPress 5.8 adds WebP support」は「ホスティングサービスが WebP に対応していれば」という条件を付けています。サーバーの画像ライブラリ（GD や Imagick）が WebP に対応していないと、サムネイルなどが作られません。アップロードした JPEG を自動で変換したい場合は、WordPress のパフォーマンスチームが公開しているプラグイン Modern Image Formats（バージョン 2.7.1、WordPress 6.9 以上）があります。説明によると、サーバーが AVIF に対応していれば AVIF、そうでなければ WebP を生成し、対象は新しくアップロードした画像だけで、既存の画像は再生成するまで変わりません。
PageSpeed Insights： Lighthouse 13.5.0 の日本語表示では、画像の指摘は「画像配信を改善する」というインサイトにまとめられ、該当する画像には「最新の画像形式（WebP、AVIF）を使用するか、画像の圧縮率を高くすると、この画像のダウンロード サイズが改善する可能性があります。」と表示されます。WordPress サイトでは、同じ指摘に Performance Lab プラグインを使った JPEG から WebP への自動変換が案内されます。ただし上の一覧表のように、形式を変えるだけで小さくなるとは限りません。指摘された画像を実際に変換して大きさを比べてください。
WebPへの変換方法
ブラウザで 1 枚ずつ： WebP 変換ツールに画像をドロップすると、ブラウザの中で canvas.toBlob() を実行し、変換前後のサイズを表示します。画像はサーバーに送信されません。品質は 0〜100 で、Chrome では 100 にすると可逆（VP8L）になります。WebP から PNG への逆変換もできます。
コマンドラインでまとめて： Mac なら brew install webp、Ubuntu・Debian なら sudo apt install webp で cwebp が入ります。cwebp のドキュメントにある主なオプションは次のとおりです。
| オプション | 効果 |
|---|---|
-q 0〜100 | 非可逆の品質。既定は 75 |
-lossless | 可逆で圧縮 |
-z 0〜9 | 可逆のプリセット。9 が最も遅く、最も小さい |
-sharp_yuv | 細い線や色付き文字のにじみを抑える RGB→YUV 変換 |
-metadata exif,icc,xmp | メタデータを残す（既定は none） |
フォルダ内の PNG を元ファイルを残したまま変換する例です。
for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; doneビルド時に自動で： Astro の <Image /> は既定で .webp を出力し、既定の画像サービスは sharp です。Next.js の next/image は formats の既定が ['image/webp'] で、リクエストの Accept ヘッダーを見て WebP を返します。上の表の sharp の行は、こうしたフレームワークがリサイズ前に出力する大きさの目安になります。
Webサイトで配信するときの注意
上の表のブラウザだけを対象にするなら <img src="photo.webp"> で十分です。古い Mac なども考えるなら、ブラウザに選ばせます。
<picture>
<source srcset="/images/photo.webp" type="image/webp">
<img src="/images/photo.jpg" alt="商品写真" width="1200" height="800">
</picture>ブラウザは type を理解できる最初の <source> を使い、どれも使えなければ <img> を表示します。width と height を書いておくと、読み込み中のレイアウトのずれを防げます。
もう 1 つの方法は、同じ URL でサーバーが形式を切り替えるやり方です。WebP を表示できるブラウザはリクエストの Accept ヘッダーに image/webp を含めるので（WebP FAQ）、サーバーはそれを見て WebP を返せます。この場合は Vary: Accept（RFC 9110 12.5.5 節）を付けないと、CDN などの共有キャッシュが WebP を保存し、WebP を要求していない端末に返してしまうことがあります。
最後にセキュリティの話です。2023 年 9 月、libwebp のヒープバッファオーバーフロー CVE-2023-4863 が libwebp 1.3.2 と Chrome 116.0.5845.187 で修正されました。外部から受け取った WebP を処理するサーバーやアプリでは、libwebp 1.3.2 以降を使っているか確認してください。