最近、WebPというファイルをよく見かけるなあ？
いったい何なの？
そんな疑問をお持ちの方にWebPについて簡潔に解説します。
WebPとは
WebP（ウェッピー）とは圧縮率の高い画像形式のことです。
Webサイトで多くの画像を使用すると表示に時間がかかります。
その問題を解決してくれます。
たとえば、ECサイトなど多くの商品画像を使うページなどで利用されます。
WebPはGoogle公式の画像形式で、2010年9月に発表されました。
当時は、対応するブラウザが限られており、対応ブラウザが限られていることから、普及が進まない状況でした。
近年、主要ブラウザであるFirefoxやMicrosoft Edge、AppleのiOS14とSafariに対応することになり使われる場面が多くなってきました。
WebPとJPEG・PNG・GIFの違い
比較する前によく使われている他の形式の特徴をまとめますと
主要な画像形式の特徴
JPEG
JPEG（ジェイペグ）は、Joint Photographic Experts Groupの略語です。
写真の保存形式に適しています。
表現できる色の数が豊富でデータ量も比較的軽いのが特徴です。
PNG
PNG（ピング）は、Portable Network Graphicsの略語です。
JPEGと同じく表現できる色の数が豊富ですが、背景を透過処理ができるのが特徴です。
「商品」や「人」だけを切り抜いたように見せる事ができるのが強みとなります。
JPEGより圧縮率が劣るので、背景を透過したい時に優先的に使うと良いです。
GIF
GIF（ジフ）は、Graphics Interchange Formatの略語です。
表現できる色の数が最大256色と少なく、画像が粗くなりがちで写真には向いていません。
アニメーションに対応していることや透過処理ができる事が特徴です。
イラスト画像に適しています。
WebPとの比較
圧縮方式
| WebP | JPEG | PNG | GIF |
| 非可逆圧縮 | 非可逆圧縮 | 可逆圧縮 | 可逆圧縮 |
WebPとJPEGが高い圧縮率でファイルサイズを小さくなり読み込みが早くなります。JPEGはWebPより低いのでWebPの方が優れています。
デメリットとしては、
JPEGとWebPは一度圧縮すると元の状態に戻すことができません。
表現できる色の数
WebP,JPEG,PNGは、表現できる色の数が豊富で細かい表現ができます。
透過
PNG,GIFは、透過処理ができますので、背景を透過したり、全体を透かしたりする用途に向いています。
アニメーション
WebPとPNGは、アニメーションに対応しています。
GIFは、透過処理アとニメーション対応ができますがWebPは透過ができません。
アニメーションはファイルの容量が増えてしまいますがWepPは高い圧縮率で抑える事ができます。
WebP使うメリットとデメリット
メリット
- Webページの表示速度を他の形式で使った時より早くできる（SEOに対しても評価される）
- 画像サイズを軽量化できディスク容量の負担を減らせる
デメリット
- 非対応のブラウザがある
画像の変換方法
新しい画像を用意するにしても、デジカメやスマホの保存形式が対応していないものが現状多いと思います。
Google社が開発した「Squoosh」を使えば、ドラッグ・アンド・ドロップするだけで変換が可能です。
まとめ
既存の画像を変換すると一手間かかりますが、Webサイトの改善に大いに役立ちます。
古いブラウザーのユーザーをサポートする必要がない場合は、積極的に使うことをお勧めします。
