こんにちは。櫻井です。
今日はjpgやpngよりもずっと軽いwebpについてお話ししようと思います。
まず、webPはGoogleが開発した静止画像フォーマットで、拡張子に.webpとつきます。

webPのいいところ

webPはとにかく軽いんです。ものによってはpngをwebpに変えただけで4分の1くらい軽くなるものもあります。正直いいところっていうとこのくらいなんですが、この軽くなり方がすごいんです。
1.2mbのものが400kbくらいに落ちると思うとすごいと思いませんか？
元々webサイトの読み込みが遅くなる理由に画像の読み込み速度はかなり大きい部分をしめていると思います。
だって全体の読み込ませているファイル量の割合でみると大半が画像なんだもん。。
例えば、KNAPのホームページだとページ下まで全て読み込ませるとトータル5.7mbファイルを読み込んでいます。そのうち画像は1.8mbです。動画が一番大きくて2.5mb。合わせたら4.3mbです。KNAPのホームページはwebpを読み込ませているのでjpgかpngで書き出していたらおそらく画像は3.6mb~7.2mbくらいになると思います。
こうして考えるとかなり読み込む量を減らせているのがわかっていただけると思います。
webPは軽いくらいしか利点が思い浮かびませんが画質もほとんど落とさずにものすごく軽くできるすごい子なんです。

webPのダメなところ

webPは軽いのはいいんですが、ダメなところもあります。webPが悪いというより主にブラウザが悪いんですが。
まずは対応していないブラウザがある点です。ie11とsafariが対応してません。safariは近々対応するみたい？してる？みたいですが。このせいで対応していないブラウザのために面倒な書き方をしなければいけません。これが二つ目です。
webPを使うときは対応してないブラウザのことも考えて以下のような書き方をします。

 
<picture>
  <source srcset="/img/example.webp" type="image/webp">
  <img src="/img/example.png" alt="example">
</picture>

webPを使うためだけにこんな書き足さないといけないのはちょっと億劫ですよね。ただ軽くなる量を考えたらこのぐらい大したことはないんですが。
webPのダメなところは次が最後ですが最後が一番問題でwebPの生成が面倒な点です。
jpgやpngのようにPhotoshopでそのまま書き出せればそれが一番いいんですが、Photoshopでは書き出せません。なので一度jpgやpngで書き出してからSquooshなどのwebPを生成できるツールを使って書き出す必要があります。全部の画像がまとめてできればそれが一番ですがそうもいきません。Gulpを使えばまとめてできますが、みんながみんなGulpを扱える訳でもありません。webPを使って更新や差し替えになると新たにwebPを作る必要がでます。製作者と同じ人が作業するならいいですが別の人がやるとなるとwebPの作り方をわかっている人じゃないとできなくなります。大変です。
ブラウザが対応してないせいで面倒な書き方をしないといけないことと、生成が面倒なところがwebPの欠点です。

まとめ

今回はwebPについてお話ししました。画像にwebPを使うかどうかのポイントは更新の頻度といかにサイトの重さが気になるかだと思います。これはお客さん次第ですね。後は公開まであまり時間がない時も僕はwebPを使うのは避けてます。管理と記述が大変なので。ただやはり画像の重さがあれだけ軽くなるのを知ってしまうと極力使いたくなります。早くsafariがちゃんと対応してie11が消えて無くなってくれればいいんですが。