使い方例
サイト全画像をWebPに変換し、ページ読み込み速度が40%改善、LCPが良好評価に到達した。
WebP
定義
WebPは、ウェブ用に最適化された画像フォーマットです。ロスレス（可逆）とロッシー（非可逆）の両圧縮方式をサポートし、アルファチャンネル（透過）にも対応しています。
使い方例
- Next.jsのnext/imageで自動変換
- Cloudflare Polishで自動WebP配信
- ビルド時にsharp等で一括変換
- picture要素でフォールバックを提供
FAQ
よくある質問
- WebPとは何ですか？
- Googleが開発した次世代画像フォーマットです。JPEGと比較して25〜35%ファイルサイズが小さく、可逆・非可逆圧縮の両方に対応しています。
- WebPは全てのブラウザで表示できますか？
- 主要ブラウザ（Chrome、Edge、Firefox、Safari 14+）で対応しています。Safariの古いバージョンでは非対応のため、picture要素でJPEGフォールバックを用意することを推奨します。