先に要点
- WebP は Google が 2010 年に発表した VP8 動画コーデックを画像化したフォーマット。JPEG 比で 25〜35%、PNG 比で 26% 前後の圧縮率を実現し、Web パフォーマンス改善の定番手段として広く採用されている。
- 2026 年時点で Chrome / Edge / Firefox / Safari / iOS / Android の全主要環境が対応済み。caniuse のグローバルサポートは 97% 超で、事実上の標準として扱える。
- 特徴は 非可逆(lossy) と可逆(lossless) の両対応 + 透過(alpha) + アニメーション。「JPEG の代替(写真)」 と 「PNG の代替(透過・ロゴ)」 と 「GIF の代替(短いアニメ)」 を 1 つでカバーできるオールラウンダー。
- AVIF はさらに 20〜30% 軽いが、WebP は エンコードが速く・編集ツールサポートが厚く・古い環境にも比較的優しい。「まず WebP、さらなる削減が欲しければ AVIF 併用」 が現代の運用パターン。
- 判断軸: 「軽量化を始めたい初手なら WebP」「写真系で限界まで削りたいなら AVIF」「編集互換最優先なら JPEG / PNG」。CDN(Cloudflare Polish / Vercel Image Optimization / CloudFront + Lambda@Edge)で自動変換すれば、ソースは JPEG / PNG のまま運用できる。
「サイトの表示速度を改善したい」「画像サイズが大きくてモバイル UX が悪い」── そういう場面で最初に検討するのが WebP です。Google が 2010 年に発表してから 15 年以上経ち、2026 年時点では 主要ブラウザがすべて対応する事実上の標準に育っています。
ざっくり言うと、WebP は 「JPEG / PNG / GIF を一つでカバーできるオールラウンダー」で、JPEG より 25〜35% 軽く、PNG より 26% 前後軽くなります。後発の AVIF はさらに圧縮率が高いものの、WebP は エンコード速度・編集ツール互換・運用の安定性で優位があります。
この記事では、WebP の 仕組み・JPEG / PNG / GIF / AVIF との違い・対応状況・実装方法・移行戦略 を実務目線で整理します。AVIF との比較は AVIF とは — WebP / JPEG との違い も併読してください。
WebP とは — まず一言で
WebP は 「Google が動画コーデック VP8 をベースに作った Web 配信向け画像フォーマット」です。「.webp」 という拡張子で、「image/webp」 という MIME タイプを持ちます。
由来と歴史
Google が 2010 年に発表。動画コーデック VP8(WebM プロジェクト由来)のキーフレーム圧縮を画像 1 枚に応用したフォーマット。Web に最適化された配信用フォーマットとして設計された。
圧縮の強さ
JPEG 比で 25〜35%、PNG 比で 26% 前後(Google 公式数値)。写真系では JPEG 並みの画質を 7 割のサイズで配信できる。サイト全体の画像トラフィックを 20〜35% 削減できる事例が多い。
機能セット
非可逆(lossy) と可逆(lossless) の両対応、透過(alpha チャンネル)、アニメーションをサポート。「JPEG / PNG / GIF を 1 つで置き換えられる」 のが最大の特徴。
ライセンス
BSD ライセンスベースで ロイヤリティフリー。商用 / 非商用を問わず自由に利用できる。VP8 の特許プールも解放済み。
JPEG / PNG / GIF / AVIF との比較
主要画像フォーマットを 1 表で並べます。
| 項目 | WebP | JPEG | PNG | GIF | AVIF |
|---|---|---|---|---|---|
| 登場年 | 2010 | 1992 | 1996 | 1987 | 2019 |
| 圧縮率(JPEG 比) | 25〜35% 軽い | 基準 | — | — | 約 50% 軽い |
| 非可逆 / 可逆 | 両対応 | 非可逆のみ | 可逆のみ | 可逆(色数制限あり) | 両対応 |
| 透過(alpha) | ○ (256 段階) | × | ○ (256 段階) | △ (1 ビット) | ○ |
| アニメーション | ○ | × | × | ○ | ○ |
| 色数 | フルカラー | フルカラー | フルカラー | 256 色まで | フルカラー + HDR |
| ブラウザ対応 | 主要ブラウザ全対応 | 全対応 | 全対応 | 全対応 | 主要ブラウザ全対応(2024〜) |
| エンコード速度 | 中 | 速い | 中 | 速い | 遅い |
「WebP は GIF / JPEG / PNG の全機能を一つでカバー + 全部より軽い」 という位置づけ。AVIF はさらに軽いが、運用負荷とのバランスで WebP が選ばれることも多い。
2026 年の対応状況
WebP は サポートがほぼ完了している成熟したフォーマット。
ブラウザ
Chrome 32+(2014)/ Edge 18+ / Firefox 65+(2019)/ Safari 14+(2020、iOS 14+) がすべて対応。Internet Explorer のみ非対応だが、IE は 2022 年にサポート終了済み。
OS のサムネ表示
macOS 11+ / Windows 10+(Microsoft Store のコーデック追加で対応)/ iOS 14+ / Android 4+ がプレビュー可能。古い Windows 10 デフォルトでは WebP プレビュー不可 なケースもあり、ユーザー環境に若干注意。
編集ツール
Photoshop は 2022 年から正式対応、Figma / Canva / Affinity / GIMP / Krita もすべて対応。主要画像編集ソフトはほぼ全対応で、編集時の互換性問題はほぼ無い。
CDN / 画像最適化サービス
Cloudflare Polish / Vercel Image Optimization / AWS CloudFront / Cloudinary / imgix が 自動変換に対応。「元データは JPEG / PNG、CDN が Accept ヘッダを見て WebP を返す」 のが現代の運用標準。
実装方法 — picture 要素 / 拡張子切り替え
WebP を導入する方法は大きく 3 通りあります。
<picture> 要素を使う方法は HTML 側で完結し、CDN なしでも導入できます。Next.js のような現代フレームワークでは Image コンポーネントが自動でやってくれます。「nginx 自動切り替え」 は元コードを変えずにサーバ側で対応する場合に有効。
変換ツール
WebP への変換は AVIF より 速くて簡単です。
コマンドライン (cwebp)
Google 公式の libwebp の `cwebp` コマンド。`cwebp input.jpg -q 75 -o output.webp` のように品質指定。大量変換は 「find . -name "*.jpg" -exec cwebp ...」 でループ。
画像処理ライブラリ
Sharp(Node.js) は 「sharp(input).webp({ quality: 80 }).toFile(out)」 と書ける。Pillow(Python) は 「Image.open(input).save(out, "WebP", quality=80)」 で出力。ImageMagick も対応している。
CDN オンザフライ変換
Cloudflare Polish / Vercel Image Optimization / Cloudinary / imgix が 「Accept ヘッダを見て WebP / JPEG を自動配信」。元画像 1 枚を置くだけで OK。運用ゼロ。
Web ベース変換ツール
Squoosh / CloudConvert / Convertio などのオンライン変換。少数の画像を試したいとき / 品質を比較したいときに便利。
エンコード設定の目安
WebP は 品質 (quality) パラメータで圧縮率をコントロールします。
| 用途 | quality | 備考 |
|---|---|---|
| サムネ・小さい画像 | 60〜70 | サイズ最小化重視、画質劣化が目立ちにくい |
| 記事内の写真 | 75〜80 | JPEG quality 85 相当の画質感 |
| ヒーロー画像・LP | 85〜90 | 高画質、ファイルサイズ大きめ |
| ロスレス(透過 PNG 代替) | `lossless: true` | PNG 代替、図表・ロゴ・スクリーンショット |
JPEG の quality 値とは 体感の対応が違う(WebP の quality 75 ≈ JPEG quality 85)ので、自分のサイトで 品質を見比べてから決める のが安全。
移行戦略 — JPEG / PNG → WebP
既存サイトを WebP 対応にする時のステップを整理します。
「まず CDN オンザフライ変換を試して、効果が出るなら本格的にビルドパイプライン化」 という流れが、AVIF と同じく現代的なアプローチです。
ハマりやすいポイント
実装で踏みやすい落とし穴を整理します。
Accept ヘッダのキャッシュ事故
CDN が 「Accept」 ヘッダを Vary に含めないと、WebP レスポンスが WebP 未対応環境に配信される。Cloudflare / CloudFront などは自動で 「Vary: Accept」 を入れるが、自前リバースプロキシでは必ず明示する。
SEO 上の影響
WebP の URL を 正規 URL として扱う 必要があるか確認。「/images/hero.jpg」 と 「/images/hero.webp」 が別 URL になると、Search Console での画像認識が分散する。同じ URL で Accept に応じて切り替えるのが SEO 上は無難。
ダウンロード提供用の画像
「ユーザーが画像をダウンロードして OS 標準アプリで開く」 想定の場合、WebP より JPEG / PNG のほうが安全。「プレビュー画像は WebP、ダウンロード用は JPEG」 のように分けるケースも。
PNG ロスレスより大きくなる場合
図表・スクリーンショットなど 色数が少なく規則性が高い画像では、「WebP lossless より PNG のほうが小さくなる」 ケースが稀にある。変換後にサイズを比較してから本番置き換えするのが安全。
WebP を使うべきか / 使わないべきか
判断の目安を整理します。
WebP に関するよくある質問
Q. WebP と AVIF、どっち使うべき?
A. 「両方使えるなら AVIF を優先 + WebP フォールバック」が現代の正解。WebP だけでも十分軽くなりますが、AVIF はさらに 20〜30% 軽くなります。「<picture>」 で 「AVIF → WebP → JPEG」 と並べると、対応ブラウザから順に軽いフォーマットを使ってくれます。詳しくは AVIF とは。
Q. WebP は SEO に有利ですか?
A. 「画像の軽量化が LCP 改善に繋がり、間接的に SEO に効く」のがメイン効果。「Core Web Vitals は検索ランキング要素」 なので、画像を軽くしてページ表示を速くすれば順位にプラス。「WebP というフォーマット自体を Google が優先する」 ことはありません。
Q. WordPress や CMS で使えますか?
A. 「使える(プラグイン経由)」。WordPress は 5.8 以降が WebP アップロードをサポート。「Smush / Imagify / ShortPixel / EWWW Image Optimizer」 などのプラグインが自動で WebP に変換してくれます。「オリジナルは JPEG / PNG のまま、配信時に WebP を自動生成」 が定番。
Q. WebP を使うとサイトデザインが崩れることは?
A. 「ほぼ無い」。WebP は 表示品質も JPEG / PNG と遜色なしで、「画質劣化で見た目が変わる」 ことは稀。quality 設定が低すぎる場合(50 以下)はノイズが出る可能性があるので、「75 以上を目安」 にする。
Q. アニメーション WebP は GIF の完全代替になりますか?
A. 「ファイルサイズで圧倒、ループ動作も同じ」。GIF の 50〜80% のサイズで同じアニメーションを配信できる。「@2x / @3x 解像度でも軽い」 ので、Retina ディスプレイ向けにも有利。「SNS 投稿用のフォーマット」 では GIF が好まれる場面もあるので、用途に応じて使い分け。
Q. WebP の透過は本当に PNG と同等?
A. 「256 段階の alpha チャンネルで PNG と同等」。透過 PNG を WebP lossless に変換しても見た目は変わらず、ファイルサイズだけが 20〜30% 削減される。「透過が必要な UI 画像」 は積極的に WebP に変える価値あり。
Q. WebP ファイルの拡張子は 「.webp」 でいいですか?
A. 「「.webp」 が公式」。MIME タイプは 「image/webp」。「サーバから配信する際にこの MIME タイプが正しく返るか」 を確認(古いサーバ設定では 「application/octet-stream」 になりブラウザがダウンロードしてしまうことがある)。
まとめ
WebP は 「Web 表示速度改善の定番手段」として、2026 年時点で完全に成熟したフォーマットです。「JPEG 比 25〜35%、PNG 比 26% 前後の圧縮率」 を 「主要ブラウザ全対応 + 編集ツール全対応 + ロイヤリティフリー」 で享受できる、導入リスクが極めて低い選択肢。
「<picture>」 要素で JPEG / PNG にフォールバックすれば未対応環境(極小)を安全にカバーでき、CDN(Cloudflare / Vercel / Cloudinary)に任せれば 運用負荷ほぼゼロで導入できます。さらに削減したければ AVIF を併用するのが現代の標準で、「AVIF → WebP → JPEG」 の三段構えで全ブラウザを最適配信できます。
参考リンク
- Google: WebP 公式
- Google: WebP Compression Study
- caniuse: WebP image format
- MDN: WebP 画像フォーマット
- libwebp: WebP のリファレンス実装