WebP (2010, Google)（ウェッピー）
Google が 2010 年に発表した Web 特化次世代画像フォーマット。VP8 動画コーデック由来の DCT ベース非可逆圧縮 + 可逆モード + アルファ透過 + アニメーション対応で、JPEG 比 25-35%・PNG 比 26% のサイズ削減を実現、Web の現代次世代画像標準として 2020 年代に普及した。
概要
WebP は、Google が 2010 年に発表した Web 特化次世代画像フォーマットで、VP8 動画コーデック (2008、Google 買収の On2 Technologies 由来) の DCT ベース非可逆圧縮 + 可逆モード + アルファ透過 + アニメーション対応の機能を統合し、JPEG 比 25-35%・PNG 比 26% のサイズ削減を実現する Web 配信に最適化された画像フォーマットです。YouTube サムネイル・Google Photos の独自利用から始まり、2018 年 Chrome 65・Edge 18・Firefox 65・Safari 14 (2020) と主要ブラウザが対応完了、2026 年現在ほぼ全環境で利用可能となった次世代 Web 画像標準です。Lossy (非可逆) ・Lossless (可逆) 両モードに対応し、JPEG/PNG の役割を一つの形式でカバー可能、Web 表示パフォーマンス改善の主役として WordPress・Cloudflare・Imgix などのプラットフォームで自動変換サポートが進んでいます。
主な特徴・仕組み
- 発表: 2010 年 Google
- ベース: VP8 動画コーデック (2008、Google 買収 On2)
- Lossy (非可逆): VP8 DCT ベース、JPEG 比 25-35% 軽量
- Lossless (可逆): PNG 比 26% 軽量、Predictive Transform
- アルファ透過: 8bit、PNG と同等
- アニメーション: 2012 年追加、GIF 代替候補
- 色深度: 8bit per channel (24bit RGB)・10bit (HDR) なし
- 拡張子: .webp
- 品質設定: 0-100 (lossy)、デフォルト 75
- ブラウザ対応: Chrome 32+・Firefox 65+・Safari 14+・Edge 18+
スペック比較表
| フォーマット | 圧縮率 (vs PNG) | アルファ | アニメ | HDR | 用途 |
|---|---|---|---|---|---|
| PNG | 100% (基準) | ○ | × | × | Web 線画 |
| JPEG | 5-15% | × | × | × | Web 写真 |
| WebP (lossless) | 74% | ○ | ○ | × | Web 線画 |
| WebP (lossy) | 5-12% | ○ | ○ | × | Web 写真 |
| AVIF | 50-65% | ○ | ○ | ○ | 次世代 |
| JPEG XL | 40-55% | ○ | ○ | ○ | 次々世代 |
具体例・対応技術
- YouTube サムネイル: 内部 WebP 配信、表示高速化
- Google Photos: ストレージ削減で WebP 採用
- Cloudflare Polish: 自動 WebP/AVIF 変換、Pro プラン
- Sharp (Node.js): 画像処理ライブラリ、WebP 高速エンコード
- Squoosh.app (Google): ブラウザ画像最適化、WebP 出力推奨
自作PCでの選び方・注意点
WebP は 2026 年現在の Web 画像最適化のデファクトスタンダードで、自作 PC でブログ運営・Web サイト構築する場合は必須技術。WordPress プラグイン (Cloudflare Polish・ShortPixel・Smush) で自動 WebP 変換、Nginx の image_filter モジュールや CDN (Cloudflare・Fastly) の自動変換も推奨。手動変換は cwebp -q 75 input.jpg -o output.webp (libwebp 公式ツール) または ImageMagick (magick input.jpg output.webp) で簡単、Pillow (Python) で Image.save('out.webp', quality=80) も同等。HTML 配信は <picture> タグでフォールバック実装が定石: <picture><source srcset="image.webp" type="image/webp"><img src="image.jpg"></picture>。Astro・Next.js・SvelteKit などの現代フレームワークは画像最適化機能で自動 WebP 生成、開発負担最小化が可能。
関連用語との違い
- JPEG: 写真の従来形式、WebP はその次世代
- PNG: 線画の従来形式、WebP Lossless がその次世代
- AVIF/JPEG XL: WebP の更に次世代、より高圧縮率
よくある質問（FAQ）
Q1: WebP と AVIF どちらを選ぶ? A: 互換性最優先なら WebP (Safari 14+・全主要対応)、圧縮率最優先なら AVIF (50% 軽量、ただし 2020 年代対応開始で旧端末不可)。両方提供がベスト。
Q2: WebP の品質設定は?
A: Lossy なら 75 デフォルト・写真用 80・Web 軽量 65。Lossless は品質設定無関係、-z 9 で最大圧縮 (時間かかる)。
Q3: アニメ用途で GIF を WebP に置換すべき? A: 推奨。GIF 比で 64% 軽量・色数制限なし・アルファ透過対応。互換性は GIF が依然優位なため、フォールバック実装が望ましい。
まとめ
- WebP = 2010 年 Google 発表、VP8 ベース次世代画像
- Lossy 25-35% 軽量・Lossless 26% 軽量・アルファ透過・アニメ対応
- 全主要ブラウザ対応 (2020 Safari 14 で完了)
- AVIF/JPEG XL が後継候補、WebP は現在の Web 標準