結論
ベクター形式の画像(SVG等)である必要が無くて、印刷物に使うものでなくて、古いブラウザに対応する必要が無ければ、WebPで良い。
WebPをネイティブにサポートするWebブラウザ個人的まとめ
実際にはWebPの機能によってWebブラウザのバージョンが違うが、面倒なら下記のバージョン以上なら対応していると考えて良い。
(参考:https://developers.google.com/speed/webp/faq?hl=ja#which_web_browsers_natively_support_webp)
- Google Chrome ( PC / Android ) 32 以降
- Microsoft Edge 18 以降
- Firefox 65 以降
- Opera 19 以降
- Safari 14 以降 ( iOS 14 以降、macOS Big Sur 以降 )
さくらインターネットからのまとめ
(https://imageflux.sakura.ad.jp/column/webp/)
- JpegやPNGと比べて画質をほぼ損なわずにファイルサイズを大幅に軽量化できる。
- 2010年にGoogleが開発した画像ファイル形式。
- 拡張子は.webp
- 可逆圧縮・非可逆圧縮の両方に対応している。
- PNGで可能だった背景透過はWebPでも可能。
- GIFのようにアニメーションにも対応していて、GIFより高い圧縮率と品質を実現している。
- 表現できる色はJpegやPNGと同じ。
- 古いWebブラウザでは対応していないので注意が必要。
- 対応していないWebブラウザは次のものがある。
- Internet Explorer 11 以下
- Safari 13 以下
- Android Browser 4.4 以下
- 非対応ブラウザのユーザは2024年時点で全体の3%らしい。
- CUIでWebPに変換するための代表的なツールは「cWebP」がある。
WikiPediaからのまとめ
(https://ja.wikipedia.org/wiki/WebP)
- オープンソースの各種ツールと共に提供が開始された。
- Jpeg, PNG, GIFの置き換えを意図する規格。
- コンテナとしてRIFFを採用している。
- コンテナ部分を除くと非可逆のWebPは1フレームのWebM。
- EXIF等のメタデータに対応している。
- CMYKカラーには対応していない。
- 「ウェッピー」と発音する。
- RFC9649で規格化されている。
Googleからのまとめ
(https://developers.google.com/speed/webp?hl=ja)
- WebPの非可逆圧縮画像のサイズはPNGに比べて26%小さくなる。
- WebPの非可逆圧縮画像のサイズはSSIM画質指標が同等のJpegよりも25%〜34%小さくなる。
(SSIM = この場合、元の画像とどれだけ近いかを示す値。全く同じ画像の場合、SSIMは1となるらしい) - 可逆WebPはサイズが22%大きくなるだけで透明度(アルファチャネル)をサポートする。
- 非可逆WebPでは透明度もサポートされ、通常PNGの3分の1のファイルサイズになる。
- 非可逆圧縮、可逆圧縮、透過、は全てアニメーションWebPでサポートされる。
WebPのブラウザサポートを検出するための資料
https://developers.google.com/speed/webp/faq?hl=ja#how_can_i_detect_browser_support_for_webp