画像をWebPにするWordPressプラグイン【EWWW Image Optimizer】

サイト内の画像読み込みを速くするために、画像のフォーマットをWebPにするのがおすすめです。

今回は、WordPressで画像をWebPにする方法を紹介します。

WebPに対応するとPageSpeed Insightsの点数も上がりますので、まだ対応していない方はぜひ対応してください。

EWWW Image Optimizerのインストール

プラグインの「EWWW Image Optimizer」を使えば、WordPressで画像をWebPにすることが可能です。

管理画面の「プラグイン」→「新規追加」に進みます。

「EWWW Image Optimizer」で検索して、上の画像と同じプラグインをインストールします。

インストールできたら「有効化」をクリックします。

EWWW Image Optimizerの設定

プラグイン一覧に戻って、「EWWW Image Optimizer」の設定に進みます。

「WebP」のタブをクリックします。

「JPG, PNG から WebP」の項目にチェックを入れて、「変更を保存」をクリックします。

「JPG, PNG から WebP」の項目にチェックにチェックを入れると、「EWWW Image Optimizer」の設定画面の下の方に次のような表示が出てきます。

「リライトルール」を挿入するをクリックしてください。

これはWebPに対応しているブラウザに対してはWebPで表示するようにする設定です。

リライトルールの挿入に成功すると、「挿入成功」という文字が出てきます。

過去にアップロードした画像もWebPにする

上記の方法では、これからアップロードする画像に関してはWebPになりますが、導入前にアップロードした画像はWebPになっていません。

ですので、ここで紹介する方法で過去にアップロードした画像もWebPに対応させてください。

「メディア」→「一括最適化」に進みます。

「最適化されていない画像をスキャンする」をクリック。

これでスキャンが始まるので、スキャンが終わるまでそのまま待ちましょう。

画像が多いと、結構時間がかかります。

WebPでPageSpeed Insightsの点数がアップ

WebPなどの次世代フォーマットによる画像の配信をしていないと、PageSpeed Insightsで減点されてしまい、以下のような提案が出てきます。

次世代フォーマットでの画像の配信
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
アップロードした画像を最適なフォーマットに自動変換するプラグインまたはサービスの使用をご検討ください。

https://developers.google.com/speed/pagespeed/insights/

この記事で説明した方法で画像をWebP対応すれば、PageSpeed Insightsの点数がアップします。

画像は表示速度にかなり影響を与える要因ですので、PSIだけでなく体感速度も速くなるはずです。

SafariもWebPに対応予定

一般公開を予定しているiOS 14、iPadOS 14、macOS Big Surに搭載される「Safari 14」は、WebP形式の画像フォーマットをサポートするとAppleから発表がありました。

これまではSafariはWebPに対応していませんでしたが、もうすぐ対応する予定です。

これで一般的なブラウザ(IEを除く)は全てWebPに対応することになります。

早くIEには滅んで欲しいですね。


他にもこんな記事があります。