次世代の画像フォーマットとして注目されている「WebP」、
Webサイトに使う画像はWebP形式がいいとされています。
ではWebP形式とはどういった画像フォーマットなのか、他の形式と何が違うのか、
WebP形式にすると何がいいのかなど分かりやすく見ていきましょう。
WebP形式はGoogleが開発した画像フォーマット
WebP形式は、2010年にGoogleが開発した画像フォーマットで、
WebP形式で保存した画像は拡張子が「.webp」となります。
（https://developers.google.com/speed/webp?hl=ja）
1677万色に対応しているので、被写体の色そのままに画像を保存することが可能です。
多彩な色に対応しているにも関わらず圧縮率が高く、
WebP形式で保存することでデータ容量を小さくできます。
圧縮しても画質は落ちませんから、
画質はそのままでデータ容量だけ小さくできるのです。
また圧縮率は低くなるものの圧縮した画像を元の圧縮していない状態に戻せる
可逆圧縮もできますし、元に戻せない非可逆圧縮も可能です。
（非可逆圧縮の方が圧縮率が高い）
背景透過やアニメーションにも対応しており、
WebP形式では画像のタイプを選ばずに保存できます。
Googleが開発しただけに、
Webサイトなネット上での利用に適した画像フォーマットとなっています。
既存の画像フォーマットのいいとこ取り
既存の画像フォーマットのいいとこ取りをしたのがWebP形式です。
画像を保存する場合、WebP形式以外だと
・JPEG形式
・PNG形式
・GIF形式
といった画像フォーマットを使うのが一般的です。
JPEG形式は1677万色対応で圧縮によって小さいデータ量で保存できます。
しかし画像を圧縮前に戻せる可逆圧縮はできませんし、
背景透過やアニメーションにも対応していません。
PNG形式も1677万色対応で画像が劣化しにくく、
背景の透過処理や画像を圧縮前に戻せる可逆圧縮ができます。
ただ圧縮率が低いのでデータ容量を小さくすることができず、
アニメーションにも対応していません。
GIF形式はアニメーションに対応しており、
一部背景透過も可能で、画像を圧縮前に戻せる可逆圧縮も可能です。
しかし256色対応で元画像の色をそのまま表現することができず、
圧縮することで画質も劣化します。
WebP形式はJPEG形式・PNG形式・GIF形式のいいとこ取りで、
あらゆる要望に応えられる画像フォーマットなのです。
画像をWebP形式にすると何がいいの？
画像をWebP形式で保存するメリットとしては、
画質を維持したままデータ容量を小さくできることが挙げられます。
スマホで写真をたくさん撮影していると、スマホのデータ容量がすぐ一杯になって
削除したりパソコンやクラウドストレージに写真を写さないといけなくなります。
WebP形式で撮影した写真を保存することでデータ容量を小さくできるので、
より多くの写真をスマホに保存しておくことが可能です。
データ容量の節約はJPEG形式でもできますが、
JPEG形式だと圧縮することで画質が落ちてしまいます。
また非可逆圧縮なので、データ容量を小さく圧縮した画像を元に戻すことができません。
WebP形式なら圧縮しても画質が落ちませんから、
思い出をそのままにデータ容量だけ小さくできます。
可逆圧縮もできますから、
データ容量を小さくした画像を圧縮前の状態に戻すことも可能です。
画像の種類を選ばずに保存できる
WebP形式はどんな種類の画像でも保存できることもメリットです。
JPEG形式やPNG形式はアニメーションに対応していませんから、
アニメーションをJPEG形式やPNG形式では保存できません。
アニメーションに対応したGIF形式は256色にしか対応していないので、
色彩豊かなアニメーションをそのまま保存することは難しいです。
WebP形式はアニメーション対応でなおかつ1677万色対応ですから、
色彩そのままにアニメーションを保存することができるのです。
写真だからJPEG形式、背景透過処理するからPNG形式、アニメだからGIF形式
といったように画像の種類によって形式を変える必要がWebP形式だとありません。
Webサイトの表示スピードアップ
Webサイトに使用する画像をWebP形式にすることで、
Webサイトの表示スピードがアップするのもWebP形式のメリットです。
画像をWebP形式にすることが、
Webサイトの表示スピードを上げることに直接繋がるわけではありません。
WebP形式にすることで画像のデータ容量が小さくなり、
Webサイト全体のデータ容量も圧縮されます。
データ容量が小さくなれば表示されるまでの時間も短くなるので、
画像をWebP形式にすることでWebサイトの表示スピードがアップするというわけです。
表示スピードアップで直帰率ダウン
Webサイトの表示スピードがアップすると、
Webサイトにアクセスしたユーザーの直帰率がダウンします。
Googleの調査によって、
Webサイトの表示スピードが早いほど直帰率が低くなることが分かっています。
（https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/）
URLやリンクをクリックしてからWebサイトが表示される時間が
1秒から3秒になるだけで、ユーザーの直帰率は32%も増えます。
もしWebサイトが表示されるのに10秒かかると、表示までの時間が1秒の場合よりも
直帰率が123%増、すなわち2倍以上のユーザーが直帰してしまうのです。
直帰したユーザーは二度とアクセスしてくれない可能性が高いですから、
直帰率が高くなることで結果的にアクセス数が伸びにくくなります。
アクセス数が伸びないとWebサイトに期待している効果があまり得られないことに
なるので、直帰率はできるだけ下げたほうがいいわけです。
Webサイトで使うWebP形式にするだけで、
結果的にユーザーの直帰率を下げることも期待できます。
サーバーの負荷が下げられる
Webサイトの画像をWebP形式にすることで、
Webサイトのデータを保存しているサーバーの負荷も下げられます。
単純にWebP形式だと画像のデータ容量は小さくなるので、
Webサイト全体のデータ容量も小さくなってサーバー負荷が下がるということです。
サーバーが負荷が大きくなると、
アクセスが増えた時にWebサイトが表示されるまでの時間が長くなってしまいます。
最悪の場合にはサーバー障害いわゆる「サバ落ち」が発生して、
Webサイトへのアクセス自体ができなくなってしまうのです。
一般的な企業サイトだとサバ落ちするほどアクセスが集中することはありませんが、
ECサイトだと販売商品によってアクセスが過剰に集中する可能性があります。
特にECサイトは商品画像をたくさん掲載しますから、WebP形式で
少しでもデータ容量を小さくしてサーバー負荷を軽減しておくほうがいいわけです。
SEO対策に有利
Webサイトで使う画像をWebP形式にすることは「SEO対策」にも有利です。
Googleは2018年1月に、
ページの読み込み速度を検索ランキングの要素として使用することを公表しています。
（https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search?hl=ja）
要するに、読み込み速度の早いWebサイトほど検索結果上位に表示される
可能性が高くなるということです。
WebP形式の画像が直接的にSEO対策に影響するわけではないですが、
WebP形式によって表示速度が上がるのでSEO対策に有利になるというわけです。
またGoogleは検索の基本事項の中で、
画像を使うことが検索順位を上げる要素となることも公表しています。
（https://developers.google.com/search/docs/essentials?hl=ja）
画像を使った上でWebサイトの表示速度を上げるには、
おのずとWebP形式の画像を使うことになるのです。
画像をWebP形式にすると何が良くないの？
画像をWebP形式にすることにはメリットも多いですが、多少のデメリットもあります。
1つは、JPEG形式やPNG形式で保存している画像を、
WebP形式に変換するにはツールが必要ということです。
画像をパソコンに保存していると、
ツールを使わなくてもJPEG形式をPNG形式に変換できますし逆もできます。
しかしJPEG形式やPNG形式の画像をWebP形式に変換するには
・Squoosh（https://squoosh.app/）
・CDKM（https://cdkm.com/jp/webp-to-png）
・Convertio（https://convertio.co/ja/jpg-webp/）
などのツールを使わないといけません。
ツール自体の使い方は簡単ですが、パソコン上で直接変換できないのは少し不便です。
JavaScriptで使用判定が出ない
現状ではJavaScriptがWebP形式に対応していません。
JavaScriptを使ってアプリなどを作る際にはWebP形式の画像は使用判定が出ず、
そのままでは使えないのです。
imageタグにWebP形式の画像を直接埋め込むことで、
JavaScriptでの使用判定が出るようになるのでまったく使えないわけではありません。
ただimageタグに埋め込むという作業が必要となりますから、
JPEG形式やPNG形式よりもJavaScriptで使う場合には手間がかかってしまいます。
まとめ
WebP形式はGoogleが開発した画像フォーマットで、
・データ容量が小さい
・圧縮しても画質が落ちない
・JPEG、PNG、GIFのいいとこ取り
・Webサイトに使うとSEO対策に有利
などのメリットがあります。
多少デメリットもありますが、それほど気にするほどのものではありませんから、
特にWebサイトに使う画像はWebP形式にするのがおすすめです。