画像を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で表示するようにする設定です。

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

豊富なオリジナルブロックでLPをかんたんに作成できるLP Creator

LPをかんたんに作成できるLP Creator

デザイン・機能・SEO・収益化にこだわったメディア運営者向け「STREETIST」

デザイン・機能・速度・SEO・収益化にこだわった、ブロガー・メディア運営者向けのデザインテーマ STREETIST

過去にアップロードした画像も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には滅んで欲しいですね。


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

(PR)LPをかんたんに作成できるLP Creator