この記事の要点

WebP（ウェッピー）は Google が 2010 年に発表した Web 向け画像フォーマット 可逆圧縮・非可逆圧縮・透過（アルファチャンネル）・アニメーションをすべて 1 形式でカバー 同等の画質で JPEG より約 25〜35% 小さく、PNG より約 26% 小さい 主要ブラウザ（Chrome、Firefox、Edge、Safari 14+）でサポート、IE は非対応 <picture> 要素で JPEG/PNG にフォールバックするのが定石 cwebp / dwebp という公式 CLI ツールで変換できる CMS（WordPress、Next.js）や CDN（Cloudflare、ImageKit）で自動配信が一般化

概要

WebP（ウェッピー、拡張子 .webp）は、Google が 2010 年 9 月に発表した Web 向けの汎用画像フォーマットです。動画コーデック VP8（後に VP9 ベースの WebP 2 も検討された）を画像 1 枚に応用したのが起源で、「Web のために最適化された画像形式」として登場しました。

WebP の最大の強みは、JPEG・PNG・GIF アニメといった従来 3 形式の役割を 1 つでカバーできる点です。具体的には次の 4 モードを単一拡張子で扱います。

• 非可逆（lossy）— JPEG 相当だが約 25〜35% 小さい
• 可逆（lossless）— PNG 相当だが約 26% 小さい
• 透過（アルファチャンネル）— PNG の代替
• アニメーション — GIF の代替、フルカラー対応

採用が広がった大きな転換点は 2020 年の Safari 14（macOS Big Sur、iOS 14）対応です。これによりモダンブラウザほぼすべてで使えるようになり、Core Web Vitals（LCP 改善）の文脈で Web 高速化の標準ツールとなりました。

内部構造とマジックナンバー

WebP は RIFF（Resource Interchange File Format）コンテナを採用しており、AVI や WAV と同じ系統のチャンク構造を持ちます。

オフセット	値（HEX）	意味
0x00–0x03	52 49 46 46	"RIFF"（ASCII）
0x04–0x07	ファイルサイズ-8	32bit LE
0x08–0x0B	57 45 42 50	"WEBP"（ASCII）
0x0C–0x0F	56 50 38 20	"VP8 "（非可逆）
同上	56 50 38 4C	"VP8L"（可逆）
同上	56 50 38 58	"VP8X"（拡張：アニメ/透過/メタデータ）

「VP8X」チャンクが先頭にある場合は、ICCP（カラープロファイル）、ALPH（アルファ）、ANIM（アニメーション）、EXIF、XMP などの追加チャンクが続く拡張ファイルです。

主な用途

• Web サイトの画像配信（特に LCP 対策、ページ表示高速化）
• ECサイトの商品画像（軽量化で離脱率を下げる）
• ニュース・メディアサイトの記事画像
• SNS シェア用のサムネイル
• 透過 PNG の置き換え（ロゴ、UI 部品）
• 軽量なアニメーション（GIF より圧倒的に小さく、フルカラー）
• CDN 経由の自動配信（Cloudflare Polish、ImageKit、Cloudinary など）

関連形式との比較

項目	WebP	JPEG	PNG	GIF	AVIF
開発	Google 2010	JPEG 委員会 1992	W3C 1996	CompuServe 1987	AOMedia 2019
非可逆	○	○	×	×	○
可逆	○	×	○	○（256 色）	○
透過	○	×	○	○（1bit）	○
アニメ	○	×	×（APNG 例外）	○	○
ファイルサイズ	小	中	大	大	最小
ブラウザ対応	Safari 14+ 含めほぼ全て	全環境	全環境	全環境	Chrome 85+/Safari 16+
エンコード速度	速い	非常に速い	速い	速い	遅い

編集・閲覧ツール

• cwebp / dwebp：Google 公式の CLI。cwebp -q 80 input.jpg -o output.webp
• Squoosh：Google が提供する Web 版変換ツール（GUI、ブラウザ完結）
• ImageMagick：magick input.png output.webp で一括変換
• Photoshop 23.2 以降：プラグインなしで保存可能
• GIMP 2.10 以降：標準で読み書き対応
• Sharp（Node.js）：高速な画像処理ライブラリ。Next.js / Nuxt の画像最適化に使われる
• ブラウザ：Chrome、Firefox、Edge、Safari 14+ で直接表示可能

注意点・落とし穴

• IE 11 完全非対応：レガシー要件がある場合は <picture> でフォールバックを必ず用意
• OS の標準アプリで開けない場合あり：Windows のフォトアプリは対応するが、古い macOS プレビュー（Mojave 以前）は非対応
• EXIF 情報が失われやすい：変換ツールによっては撮影日時・位置情報を落とすので、写真の管理用途には注意
• 過剰圧縮の罠：品質 50 以下にすると JPEG より目立つブロックノイズが出る。Web 配信なら 75〜85 程度が無難
• SEO への影響：Google 画像検索は WebP をインデックスするが、ソーシャル OGP では JPEG/PNG を要求するプラットフォームが残るので注意
• サーバー設定：MIME タイプを image/webp に設定しないと一部 CDN/サーバーで配信されない

典型的なフォールバック例：

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

関連リンク

• 画像形式（親カテゴリ）
• ファイル拡張子とは
• JPEG（.jpg / .jpeg）
• PNG（.png）
• GIF（.gif）
• AVIF（.avif）
• 次世代フォーマットでの画像の配信
• アニメーション コンテンツでの動画フォーマットの使用