PageSpeed Insightsでサイトのパフォーマンスを計測すると「次世代フォーマットでの画像の配信」と改善策が提案されることがあります。
少し前までは次世代フォーマット（WebP/ウェッピー）をサポートしているブラウザがあまりにも少なかったので対策はしなかったんですが、最近CanIUseを見てた時に各ブラウザがサポートをし始めていることを知りました。
昨年頃からGoogleのSpeed Updteによって正式にページの読み込み速度もランキング要因に組み込まれたので、せっかくなのでこの機会に画像配信をJPGやPNGからWebPへ変更しようと思います。
そもそもWebPとは？
WebPとはあの超巨大IT企業Googleが開発している静止画フォーマットになります。
JPGやPNG、GIFなどと並ぶ新しいフォーマットです。
ウェブサイトのトラフィック量軽減と表示速度短縮が目的とされており、Googleが示した事例ではJPGでは25～34%程度、PNGでは28％程度小さくなるとされています。
アルファチャンネルも扱えるため、ウェブサイトでの表示に特化されたフォーマットです。
Wikipediaによると2010年には誕生していたようですね。
各ブラウザの対応状況
Safari以外のメジャーなブラウザは対応していますね。
Microsoft Edgeも最新のバージョンで対応されています。
Safariは未だ対応していないので、iPhoneがよく利用される日本ではまだ少し普及が遅れています。
WebPのメリット
トラフィック量削減&表示速度短縮という目標からも分かる通り、JPGやPNGなどと比べ高い圧縮率を実現しています。最強にして最大のメリットですね。
WebPのデメリット
Safariなど日本で利用ユーザーの多いブラウザが未だ未対応です。こちらも最強にして最大のデメリットですが、このデメリットは対策することが出来ます。
.htaccessを利用し対応しているブラウザはWebPを、未対応のブラウザは今まで通りのJPGもしくはPNG、GIFなどを配信します。
未対応のブラウザはWebPの恩恵を受けることが出来ませんが、だからと言って画像が表示されないなんてユーザー体験を損ねることはありません。
プラグインのインストール
このサイトはWordPressで構築されているので手っ取り早くプラグインを利用します。
管理画面から「EWWW Image Optimizer」を調べてインストールします。
インストールしたらそのまま有効化を押します。
設定する
インストール&有効化を行うと「設定」に「EWWW Image Optimizer」が追加されます。
WebPタブを選択しJPG、PNGからWebPにチェックを入れます。
今後上げる画像はアップロードと同時にWebPフォーマットの画像も自動生成されます。オリジナル画像が直接変換されるわけではないので安心してください。
チェックを入れたら保存してください。
次に今まで上げてきた画像も一括でWebP画像を生成します。
「メディア」に「一括最適化」が追加されているのでクリックします。
「再最適化を強制」にチェックを入れ、「最適化されていない画像をスキャンする」をクリックします。
するとアップロードされている画像がスキャンされるので少しの間待ちます。
「最適化を開始」が表示されたらクリックします。
すると今まで上げた画像のWebPフォーマットが一括で生成されます。
再び「設定」の「EWWW Image Optimizer」に戻ります。
対応しているブラウザにはWebPを、未対応のブラウザはJPGやPNG、GIFなどのオリジナルを配信するよう.htaccessを編集します。
一番下までスクロールすると「リライトルールを挿入する」があるのでこれをクリックします。
「挿入成功」と表示されます。
一度その画面で「Ctrl + F5」でスーパーリロードを行います。
右下の赤色のPNGが緑色のWebPに変わったら正常に動作しています。
ちなみにこの「リライトルールを挿入する」を押しても正常に動作しない場合があるとネット上で見かけました。その場合はご自分で.htaccessにコードを追加することで解決できるようです。
確認する
Chromeの開発者ツールを利用しWebPで配信されているか確認をします。
ちゃんとWebPで配信されていますね。
まとめ
WebPでの配信に変わってからオリジナルよりも多少画像の劣化が目立つようになりました。
とはいえじっくり見なければ大した問題ではないので当分の間はこのまま利用を続けてみようと思います。
.htaccessを編集するため最悪の場合サイト自体が表示されなくなる場合があります。
バックアップは必ずとり、自己責任での作業をお願いします。