画像フォーマット
WebPフォーマット完全ガイド
Googleが2010年に発表した次世代画像フォーマット。非可逆・可逆圧縮、透明度、アニメーションを1つのフォーマットでサポートし、JPEGより25-34%小さいファイルサイズを実現します。
概要
WebPはGoogleがウェブパフォーマンスの向上を目標に開発した画像フォーマットです。ファイル拡張子は.webp、MIMEタイプはimage/webpです。
非可逆圧縮と可逆圧縮の両方をサポートし、透明度(アルファチャンネル)とアニメーションまで1つのフォーマットで処理します。JPEG、PNG、GIFの長所を統合した汎用フォーマットと言えます。
歴史
- 2010年9月 — GoogleがWebPプロジェクトを公開発表。VP8ビデオコーデックのキーフレームエンコーディングをベースに開発。
- 2011年11月 — 可逆圧縮およびアルファチャンネル(透明度)サポートを追加。
- 2012年 — アニメーションサポートを追加。アニメーションGIFの代替として浮上。
- 2014年 — Chrome、Operaで標準サポート。Androidでネイティブサポート。
- 2018年 — Edge(Chromiumベース移行後)でサポート。
- 2020年 — Safari 14(macOS Big Sur、iOS 14)でサポート。事実上すべての主要ブラウザで使用可能に。
- 2024年 — 全世界のブラウザの97%以上でサポート。
圧縮方式
非可逆圧縮(VP8ベース)
WebPの非可逆圧縮はVP8ビデオコーデックのイントラフレームコーディングをベースにしています。JPEGのDCTと類似していますが、より現代的な予測コーディング技法を使用します。
- 予測コーディング:4x4または16x16ブロック単位で周辺ピクセルを基に予測し、実際の値との差(残差)のみをエンコードします。
- 適応的ブロックサイズ:JPEGの固定8x8ブロックとは異なり、画像の特性に応じてブロックサイズを調整し、ブロッキングアーティファクトを軽減します。
- ブール算術コーディング:ハフマンコーディングより効率的な算術コーディングを使用します。
- ループ内デブロッキングフィルタ:エンコーディング過程でブロック境界を滑らかに処理し、アーティファクトを低減させます。
可逆圧縮
WebP可逆圧縮はPNGの代替として、完全に独自のアルゴリズムを使用しています。
- 予測変換:周辺ピクセルベースの予測でエントロピーを削減。
- 色変換:相関関係のある色チャンネルを脱相関(decorrelate)。
- 緑色参照変換:緑チャンネルを基準に他のチャンネルをエンコード。
- LZ77 + ハフマンコーディング:繰り返しパターンを効率的に圧縮。
- 色キャッシュ:最近使用された色をキャッシュして重複除去。
WebP可逆圧縮はPNG比で平均26%小さいファイルを生成します。特に透明度のある画像で効果が大きくなります。
主要機能
| 機能 | 対応状況 | 備考 |
|---|---|---|
| 非可逆圧縮 | 対応 | VP8ベース、JPEG比25-34%削減 |
| 可逆圧縮 | 対応 | PNG比26%削減 |
| 透明度(アルファ) | 対応 | 非可逆・可逆の両方でアルファチャンネル可能 |
| アニメーション | 対応 | GIF比64%小さいファイルサイズ |
| 色深度 | 24/32ビット | RGB 24ビット + アルファ8ビット |
| 最大解像度 | 16383 x 16383 | 一般用途に十分 |
| ICCプロファイル | 対応 | カラーマネジメント可能 |
| Exif/XMP | 対応 | メタデータ保持 |
ブラウザ互換性
2024年基準で、WebPは全世界のブラウザの97%以上でサポートされています。
| ブラウザ | サポート開始 |
|---|---|
| Chrome | 9+(2011) |
| Firefox | 65+(2019) |
| Edge | 18+(2018) |
| Safari | 14+(2020) |
| Opera | 12+(2012) |
| Android WebView | 4.2+(2012) |
| iOS Safari | 14+(2020) |
2020年のSafari対応以降、実務でWebPを安心して使用できます。IE 11のサポートが必要な場合にのみJPEG/PNGのフォールバックが必要です。
JPEG比較優位
- ファイルサイズ:同等の視覚品質でJPEGより25-34%小さいファイル。ウェブパフォーマンスに直接的な影響。
- 透明度サポート:JPEGにないアルファチャンネルをサポート。半透明画像も非可逆圧縮が可能。
- 非可逆+透明:JPEGの高い圧縮率 + PNGの透明度を1つのファイルで。従来は不可能だった組み合わせ。
- アーティファクトの軽減:適応的ブロックサイズとデブロッキングフィルタによりブロッキングアーティファクトが少ない。
- アニメーション:GIF代替としてはるかに効率的なアニメーションサポート。
制限事項
- 編集ソフトウェアサポート:JPEGほど普遍的ではない。古い編集ソフトでは開けない場合あり。
- 最大解像度制限:16383x16383ピクセル。大型印刷やパノラマには不足する場合あり。
- エンコード速度:JPEGより低速。大量バッチ処理時に差を実感。
- HDR非対応:チャンネルあたり8ビット制限。HDR画像にはAVIFやJPEG XLが適切。
- 段階的読み込み非対応:プログレッシブJPEGのように段階的に表示する機能なし。
E-inkデバイスの互換性を確認してください。一部の旧型E-inkリーダーはWebPをサポートしていない場合があります。互換性が不確実な場合はJPEGを使用するのが安全です。
CropCropでの活用ヒント
- ウェブ用画像:ウェブにアップロードする画像であればWebPフォーマットを選択してください。JPEG比でファイルサイズが大幅に削減され、ページの読み込みが速くなります。
- 透明背景:AI背景除去後にWebPでエクスポートすると、透明度を維持しながらPNGより小さいファイルを得られます。
- E-ink壁紙:E-inkデバイスがWebPをサポートしているか確認してから使用してください。サポートされていればJPEGより小さいファイルで同等の品質を得られます。
- 品質設定:非可逆WebPの場合、品質80-85が最適です。JPEGより低い数値でも同等の視覚品質を示します。