WebP（ウェッぴー）について調べた

きっかけ#

LCP（Largest Contentful Paint）について調べていたら、画像最適化の文脈でWebPが何度も出てきて、気になって調べてみました

WebPとは#

WebP（ウェッピー）は、Googleが開発した次世代の画像フォーマットです

「ウェブピー」ではなく「ウェッピー」と読むらしいです、かわいい

WebPの特徴#

WebPには以下のような特徴があります

透過に対応: PNG同様、アルファチャンネルを使った透過表現が可能
アニメーションに対応: GIF同様、アニメーション画像を作成できる
可逆圧縮と非可逆圧縮の両方に対応: 用途に応じて選択可能

どれくらいファイルサイズが小さくなるのか#

WebP公式サイトによると、以下のような圧縮効果があります

可逆（ロスレス）圧縮

可逆WebP画像は、PNGに比べて26%小さい

非可逆（ロッシー）圧縮

非可逆WebP画像は、SSIM画質指標が同等のJPEG画像よりも25%～34%小さい

透過対応

可逆WebPは、透明度（アルファチャンネル）をサポートしても22%大きくなるだけ

非可逆WebPでは透明度もサポートされ、通常PNGの3分の1のファイルサイズ

アニメーション

アニメーションWebPは、GIFやAPNGと比較してサイズを縮小できる

特に透過PNG画像を非可逆WebPに変換すると、ファイルサイズが3分の1になるのはかなりの削減効果ですね

ブラウザの対応状況#

よく「デメリットとして古いブラウザが対応していない」と言われますが、実際には現在ではほとんどの主要ブラウザがWebPに対応しています

公式のFAQによると、Google Chrome、Safari、Firefox、Edge、Operaなど、主要なブラウザはすべてWebPをネイティブにサポートしています

まとめ#

WebPは、ファイルサイズの大幅な削減と画質の両立を実現する優れた画像フォーマットです

ブラウザの対応も十分に進んでいるため、Webサイトでの採用を積極的に検討する価値があります