「Webp(ウェッピー)」とは、Googleが推奨している画像形式で、圧縮率が高く、ファイルサイズを小さくすることできる次世代画像フォーマットです。
表示速度を上げることができ、SEOにも良い影響を与えることが出来ると思いきや、対応しているブラウザが限られていたため、そんなに普及しませんでした。
近年になって、対応ブラウザが増え、「Webp」を導入しているサイトも増えたため、このサイトも「Webp」に変換したい!!
とはいっても、過去の画像を全て「Webp」に変換するのは面倒な話…。
どうしようかなぁ…と悩んでいましたが、元々、画像を圧縮するために入れていたプラグイン「 EWWW Image Optimizer 」に「Webp変換」という項目があったので、そいつを試してみることにしました。
「EWWW Image Optimizer」を使って「Webp」に一括変換
「EWWW Image Optimizer」の設定画面の一番下に「Webp変換」という項目がありますので、「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」にチェックを入れます。
すると、「Web配信方法」という項目が現れますので、枠で囲まれているコードを「.heaccess」に追記します。
![EWWW Image Optimizer管理画面](https://www.bossraku.com/wp-content/uploads/2022/02/211201-ew-01.webp)
「リライトルールを挿入する」ボタンを押しても、「.htaccess」に追記されますが、うまく動作しません。
この方法だと、「.heaccess」の最後尾に追記されるのですが、先頭に追記しなければなりません。
FTPでダウンロードして編集、アップロードするか、サーバーの「.htaccess編集」機能などを使用しましょう。
右側の赤い「PNG」の表記が、緑の「WEBP」になれば成功です。
![EWWW Image Optimizer管理画面](https://www.bossraku.com/wp-content/uploads/2022/02/211201-ew-02.webp)
メニューの「メディア」に「一括最適化」という項目が追加されているので、そこから、「最適化されていない画像をスキャンする」で最適化します。
PageSpeed Insightsで確認
「webp」変換前は「改善できる項目」に「次世代フォーマットでの画像の配信」が挙がっていました。
![PageSpeed Insights改善できる項目](https://www.bossraku.com/wp-content/uploads/2022/02/211201-sc-01.webp)
最適化後はこの項目は消え、「合格した監査」に移動しています。
![PageSpeed Insights合格した監査](https://www.bossraku.com/wp-content/uploads/2022/02/211201-sc-02.webp)