JPG・PNGを簡単にWebP変換して次世代フォーマットでの画像の配信を改善・解決する方法

Google PageSpeed Insightsの「改善できる項目」で表示された「次世代フォーマットでの画像の配信」。

今回ご紹介する方法で「改善できる項目」から消えて監査に合格します。

とても簡単にできる解決方法があり、手順は大きく分けて3ステップです。

アップロードしたjpgやpngの画像をプラグインを使ってWebP（ウェッピー）に一括変換すれば、簡単に解決できます。

WebP（ウェッピー）は Googleが開発した画像フォーマットで、サイズも画質はjpgやpngとほとんど変わらないのに、とても軽いことからGoogle側が推奨しています。

実際に、ブログの表示速度の改善にも影響する部分です。

プラグインを使えば、大量の画像を一括でWebPに変換できるので、サクッとやっておきましょう。

1：プラグイン「EWWW Image Optimizer」を設定する

①「EWWW Image Optimizer」をインストールする

WordPress管理画面左メニューの「プラグイン」にカーソルを合わせて「新規追加」をクリックします。

「EWWW Image Optimizer」を入力し、プラグインをインストール後に有効化をクリックします。

これでインストール完了です。

②「EWWW Image Optimizer」の設定をする

有効化後に「EWWW Image Optimizer」の「設定」をクリックします。

選択タブの「WebP」をクリックして「WebP変換」にチェックを入れます。

「変更を保存」ボタンをクリックします。

ここまでで「EWWW Image Optimizer」の設定は終了です。

次に「.htaccess」を編集していきます。

④のようなコードの羅列が表示されているので、コードの羅列を全てコピーします。

2：「.htaccess」を編集する

「.htaccess」の編集は

• サーバーの管理画面から行う
• FTPソフトで行う

2つのパターンがありますが、サーバーの管理画面から行った方が簡単にできます。

ここでは「サーバーの管理画面から行う」やり方を解説します。

①サーバーにログインする

現在ブログを使っているサーバーにログインします。

エックスサーバーの場合は、ログイン後に「サーバー管理」をクリックします。

②対象ドメインを選択して「.htaccess」の編集をする

ブログで利用しているドメイン名を選択します。

①の「設定対象ドメイン」の選択タブで選択後「設定する」をクリックします。

次に②の「.htaccess編集」をクリックします。

「.htaccess編集」タブを選択すると文字を直接入力できる画面に切り替わります。

念の為、バックアップを取っておきましょう。

文字を入力できる枠内に、先ほどコピーしたコードを貼り付けます。

先ほどコピーしたコードは、「EWWW Image Optimizer」の設定の画像④の部分のコードです。

コピーしたコードは、一番上に貼り付けます。

「保存」をクリックすれば「.htaccess編集」は終了です。

次に「画像の最適化」をする手順です。jpgやpngをWebPに一括変換するステップです。

3：「画像の最適化」でWebPに一括変換する

①一括最適化を開く

WordPress管理画面左メニューの「メディア」にカーソルを合わせて「一括最適化」をクリックします。

②一括最適化の設定をする

画像①の「最最適化を強制」にチェックを入れて「最適化されていない画像をスキャンする」をクリックします。

③一括最適化する

当ブログでは「3,190点の画像を最適化」と表示されました。

数字部分はブログによって変わりますので、数字の多い少ないは気にしなくてOKです。

このまま「〇〇○○点の画像を最適化」ボタンをクリックします。

④最適化が終わるまで待つ

一括最適化が始まるので、終わるまでしばらく待ちます。

当ブログは、最適化の画像数が多かったせいか30分くらいかかりました。

これでjpgやpngの画像がWebPに変換され、次世代フォーマットでの画像の配信が解決できます。

確認してみましょう。

補足：WebPになっているかどうか確認する方法

確認方法①：「EWWW Image Optimizer」プラグインで確認する

WebPに一括変換する前は「EWWW Image Optimizer」プラグインの右下に「PNG」と表記されています。

WebPへの変換が完了すると「WebP」に表記が変わります。

確認方法②：Google PageSpeed Insightsで確認する

WebPに変換する前までは「次世代フォーマットでの画像の配信」が表示されていたと思います。

設定後にもう一度調べてみると「次世代フォーマットでの画像の配信」が消えています。

下にスクロールしていくと「合格した監査」という項目があるので、クリックして開きます。

「合格した監査」の項目内に「次世代フォーマットでの画像の配信」が入っていればOKです。

まとめ

画質を落とさず画像の容量を抑えつつ、表示速度が早いブログを実現してくれるのが次世代画像フォーマットのWebPです。

きちんと設定しておきましょう。