サイト内の画像読み込みを速くするために、画像のフォーマットを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で減点されてしまい、以下のような提案が出てきます。
次世代フォーマットでの画像の配信
https://developers.google.com/speed/pagespeed/insights/
JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。
アップロードした画像を最適なフォーマットに自動変換するプラグインまたはサービスの使用をご検討ください。
この記事で説明した方法で画像をWebP対応すれば、PageSpeed Insightsの点数がアップします。
画像は表示速度にかなり影響を与える要因ですので、PSIだけでなく体感速度も速くなるはずです。
SafariもWebPに対応予定
一般公開を予定しているiOS 14、iPadOS 14、macOS Big Surに搭載される「Safari 14」は、WebP形式の画像フォーマットをサポートするとAppleから発表がありました。
これまではSafariはWebPに対応していませんでしたが、もうすぐ対応する予定です。
これで一般的なブラウザ（IEを除く）は全てWebPに対応することになります。
早くIEには滅んで欲しいですね。
他にもこんな記事があります。
WordPressのセキュリティを強化できるプラグイン「All-In-One…
WordPressは利用者が多い分、悪意のある第三者にハッキングされる危険性があります。何も対策を行…
WordPressで会員サイトが構築できるプラグイン「WP-Members」
今回は、WordPressで会員サイトを作成できるプラグイン「WP-Members」の紹介です。WP…
【画像軽量化】WordPressで画像を軽くする方法やプラグインの…
サイトの表示速度が遅くなる原因のほとんどが画像です。画像を最適化することは、サイトの表示速度を速くす…
