サイト高速化で一番の足枷となる画像配信ですが、先日あるサイトで試してみて一定の効果がみられたので今回はwebP（ウェッピー）の導入方法について書きたいと思います。
webP（ウェッピー）とは
ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。Wikipedia
Googleが開発した次世代の画像フォーマットで、みなさんお馴染みの「.png」や「.jpg」の「.webp」版と思っていただければ良いです。
導入することのメリット
「画像サイズを小さくできる」の一言につきます。
そもそもpngやjpgがあるから良いのでは？となる方もいるかと思いますが、画像はWebサイトのデータ容量の中でやはり多くを占めるものであり、サイト高速化を行うにあたって必ずぶち当たる壁かと思います。
そんな中webpにすると約30%ほど小さくすることができると言われています。
画像が少ないサイトではあまり効果を発揮しませんが、複数枚の大きい画像を表示しているところなどは導入するとその効果がはっきりわかるでしょう。
逆にデメリットはあるの？
すべてのブラウザが対応していなく、現時点（2019/10）ではSafariやIEが対応していないため、これらのブラウザを使用しているユーザーは恩恵にあずかれません。
導入する際はサイトのブラウザ比率を確認し、上記ブラウザ以外が大多数を占めるのであれば試してみると良いと思います。
対応方法
今回私は対応ブラウザではwebPを、そうでないブラウザではそのままの画像ファイルを表示するという方法をとりました。
こちらであれば既存のブラウザに対して影響がなく、恩恵をあずかれるユーザーに対しては良い体験を届けることができます。
①画像をwebPに変換する
変換方法はサイトなどで変換するかコマンドラインで変換する方法がありますが、今回はコマンドラインの方法を紹介します。
・下記コマンドをコマンドライン上で実行（Homebrewインストール済み前提です）
brew install webp
・対象の画像に対して下記コマンド実行
cwebp test.png -o test.webp
※cwebpのあとが対象ファイル、-oのあとがwebP変換後のファイル名です
これでwebP変換は完了です。
実際画像と同じディレクトリにwebPが作成されているので、ファイルサイズを確認してみてください。
そちらである程度の画像軽量化ができているなら、導入、そうでないなら導入見送りにすると良いと思います。
②サイトに表示する
表示するだけならimgタグのsrcにwebpの画像パスを指定するだけでOKなのですが、対応していないブラウザで画像が見れなくなってしまうため、pictureタグを利用して対応ブラウザとそうでないブラウザの出し分けを行います。
<picture> <!-- WebPの画像パス --> <source srcset="test.webp" type="image/webp"> <!-- 元画像パス --> <img src="test.png"> </picture>
こちらを記述することで出し分けを行うことができます。試しに対応ブラウザとそうでないブラウザで画像をダウンロードしてみると出し分けが確認できると思います。
IE対応も忘れずに
pictureタグは残念ながらIE11では対応していないため、こちらも対応する必要があります。
基本的に下記polyfillで対応でOKだと思います。（なんらかの理由でJS追加できないだったら諦めるしかないですね、、、）
ここにあるpicturefill.min.jsをダウンロードして、サイトで読み込むようにすれば対応は完了です。
これで晴れてあなたのサイトもwebP対応！（Lighthouseのスコアが上がっているかも？）
まとめ
作業的にはあまり面白みはないですが、上記の対応だけで30%も画像サイズを削れるならやらない理由がないでしょということで試してみました。
ファイルサイズも圧縮できて、Lighthouseのパフォーマンスのスコアも改善できるので、サイト高速化やらないといけないけど、何からやればいいか・・・と悩んでいる人がいたらぜひお試しください。
