ブログの記事の中にjpgやpngの画像を貼り付けている人も多いと思いますが、同等の画質でファイルサイズ(容量)がかなり小さくなるWebp(ウェッピー)を使いたいと思いますよね?
ファイルサイズが小さいので、ページが表示されるスピードが早くなり、読書のページ離脱を防ぐことができます。
さらにGoogleからの評価が高くなり、結果的にSEO対策(検索の上位表示)に効果があるという、メリットもあります。
ここでは、画像をWordPressにアップローロするだけで、jpgやpngを自動でWebPに変換してくれるEWWW Image Optimizerの設定方法を紹介したいと思います。
今までアップロードした画像も一括で変換できる機能もあるので、そちらの設定方法もあわせて紹介します。
もっとページ表示を速くしたいと思っている人はぜひ参考にしてください!
EWWW Image Optimizerをインストールする
まずは、EWWW Image Optimizerをインストールします。
すでにインストールしている人は、ここはスキップして、次の「EWWW Image Optimizerの設定(WebPに変換できるようにする)」に進んでください。
(01) WordPressの管理画面にログインし、左のメニュー「プラグイン」(①)→「新規追加」(②)とクリック。
(02) 「キーワード」のところで、「EWWW」と入力すると自動で検索が実行されます。
(03) 「EWWW Image Optimizer」が表示されるので、「今すぐインストール」をクリック。
(04) 「有効化」をクリック。
これで、「EWWW Image Optimizer」が使えるようになったので、WebP変換の設定に進みます。
EWWW Image Optimizerの設定(WebPに変換できるようにする)
では、アップロードした画像をWebPに変換する設定をしていきます。
(05) Web管理画面の左メニューの「設定」(①)→「EWWW Image Optimizer」(②)をクリック。
(06) 以下の赤枠の部分にチェックをつけて、「次」をクリック。
(07) ①の「WebP変換」以外の赤枠部分のチェックはすべて外します。
そして、①にチェックをつけると、その下に「次へ」ボタンが表示されるので、「次へ」ボタン(②)をクリック。
(08)すると、「次へ」ボタンのところが消えるので、あらためて①の「WebP変換」にチェックをつけて「設定を保存」をクリック。
(09)次に、「ほかのブラウザでは元の画像を提供し、、、、、」にチェックをつけます。
ここで、チェックをつけることで、IEなどのWebPに対応していない古いブラウザの場合は、WebPではなく変換前のjpgやpngが表示されるようになります。
(10)チェックをつけた「WebP変換」(①)の下の方に、「WebPの配信方法」という項目が表示されます。
ここで、「リライトルールを挿入する」(②)をクリックします。
この画面の右下に赤く「PNG」と表示されていますが、このままではまだ「WebP」に変換されないことを示しています。
「WebP」に変換できるようになった場合、ここが緑で「WebP」と表示されます。
(11)「リライトルールを挿入する」をクリクすると、以下のように緑で「WebP」と表示されました。
これで「WebP」に自動変換する設定は終わったので、下の方にある「変更を保存」をクリックします。
画像をアップロードして本当に自動変換されるか確認してみる
画像をアップロードした時に、jpgやpngを自動でWebPに変換する設定は終わりましたが、本当にWebPに変換されるか実際に画像をアップロードして確認してみましょう。
(12)適当な画像をメディアライブラリにアップロードしたら、以下のようにメディアライブラリを一覧形式に変更します。
下の画像(scottish-fold_1)は、WebPの変換設定をする前に既にアップロードされていた画像で、この画像は元の画像のjpgのままとなっています。
対して、上の画像(scottish-fold_2)は、WebPの変換設定をした後にアップロードした画像で、赤枠部分を見るとWebP形式に変換されていることがわかります。
なお、元のjpg画像のファイルサイズは、146KBでしたが、変換されたWebPのサイズは37.4KBとなっているので、計算すると「25%」(1/4)のサイズになっていることがわかります。
とんでもない圧縮率ですね(画質も元の画像とほとんど変わりません)
既にアップロードしている画像を一括でWebPに変換してみる
WebPの変換設定は終わったので、これからアップロードする画像はすべて自動でWebPに変換されるようになりました。
どうせなら、今までアップロードしていた画像もできればWebPに変換したいですよね?
「EWWW Image Optimizer」には、アップロード済の画像を一括でWebPに変換する機能が用意されています。
(13)WordPress管理画面の左メニュー「メディア」(①)→「一括表示」(②)をクリック。
(14)「再最適化を強制」、「WebPのみ」の部分にチェックをつけて、「最適化されていない画像をスキャンする」をクリック。(WebPに変換する対象の画像を調べてくれます)
(14)ここでは290個の画像が、WebPに変換する対象であることがわかりました。
このまま「290点の画像を最適化」をクリックします。
(15)変換処理は時間がかかりますが、しばらくすると以下のように「完了」と表示されます。
これでアップロード済のすべての画像がWebPに変換されました。
念の為、WebPに変換されたか、メディアライブラリの一覧から確認してみます。
下の画像((scottish-fold_1)が、一括変換したアップロード済の画像です。
赤枠部分を見るとわかるように、上の画像(scottish-fold_2)と同じようにWebPと表示されているので、ちゃんとWebPに変換されていることがわかります。
「EWWW Image Optimizer」を使って、アップロード画像をWebPに自動変換する設定は以上ですが、記事内の画像はできるだけファイルサイズを小さくすることに越したことはありません。
ページの表示を速くすることで、読者が離脱することを防げるし、なにより、Googleからの評価もアップするので、結果的に検索結果が上位表示する効果も狙えて、「一石二鳥」です。
ぜひ、「EWWW Image Optimizer」を使ってWebPへの変換に挑戦してみてください!
コメント