「EWWW Image Optimizer」を使って、次世代画像フォーマット「Webp」に変換してみた

「Webp(ウェッピー)」とは、Googleが推奨している画像形式で、圧縮率が高く、ファイルサイズを小さくすることできる次世代画像フォーマットです。
表示速度を上げることができ、SEOにも良い影響を与えることが出来ると思いきや、対応しているブラウザが限られていたため、そんなに普及しませんでした。

近年になって、対応ブラウザが増え、「Webp」を導入しているサイトも増えたため、このサイトも「Webp」に変換したい!!
とはいっても、過去の画像を全て「Webp」に変換するのは面倒な話…。
どうしようかなぁ…と悩んでいましたが、元々、画像を圧縮するために入れていたプラグイン「 EWWW Image Optimizer 」に「Webp変換」という項目があったので、そいつを試してみることにしました。

「EWWW Image Optimizer」を使って「Webp」に一括変換

「EWWW Image Optimizer」の設定画面の一番下に「Webp変換」という項目がありますので、「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」にチェックを入れます。

すると、「Web配信方法」という項目が現れますので、枠で囲まれているコードを「.heaccess」に追記します。

EWWW Image Optimizer管理画面

「リライトルールを挿入する」ボタンを押しても、「.htaccess」に追記されますが、うまく動作しません。
この方法だと、「.heaccess」の最後尾に追記されるのですが、先頭に追記しなければなりません。
FTPでダウンロードして編集、アップロードするか、サーバーの「.htaccess編集」機能などを使用しましょう。

右側の赤い「PNG」の表記が、緑の「WEBP」になれば成功です。

EWWW Image Optimizer管理画面

メニューの「メディア」に「一括最適化」という項目が追加されているので、そこから、「最適化されていない画像をスキャンする」で最適化します。

PageSpeed Insightsで確認

「webp」変換前は「改善できる項目」に「次世代フォーマットでの画像の配信」が挙がっていました。

PageSpeed Insights改善できる項目

最適化後はこの項目は消え、「合格した監査」に移動しています。

PageSpeed Insights合格した監査

コメントを残す

メールアドレスが公開されることはありません。