image/webpとimage/avif — 次世代画像フォーマット
モダンな画像MIMEタイプimage/webpとimage/avif、ブラウザサポート、JPEGやPNGとの比較を解説します。
Image Types
詳細な説明
モダン画像フォーマット: WebPとAVIF
次世代の画像フォーマットは、JPEGやPNGより大幅に優れた圧縮を提供しながら、同等の視覚品質を維持します。
image/webp
Googleが開発したWebPは、非可逆・可逆圧縮、アニメーション、アルファ透過をサポートします。
- 非可逆サイズ: JPEGより約25〓35%小さい
- ブラウザサポート: すべてのモダンブラウザ
image/avif
AV1ビデオコーデックに基づくAVIFは、さらに優れた圧縮率を達成します。
- 非可逆サイズ: JPEGより約50%小さい
- HDR: 広色域とHDRをサポート
比較表
| 特徴 | JPEG | PNG | WebP | AVIF |
|---|---|---|---|---|
| 非可逆 | ○ | × | ○ | ○ |
| 可逆 | × | ○ | ○ | ○ |
| 透過 | × | ○ | ○ | ○ |
| HDR | × | × | × | ○ |
ユースケース
JPEGとPNGの汎用的なモダン代替としてimage/webpを採用します。最大の圧縮削減のために、サポートするブラウザをターゲットにする場合はimage/avifを使用します。<picture>フォールバックで幅広い互換性を実現します。