当サイトは広告が含まれています

EWWW Image Optimizerの設定とWebPへの変換方法

EWWW Image Optimizerの設定とWebPへの変換方法

こんにちは、ikuzo(いくぞう)です。

今回はブログの画像を自動で圧縮したり、圧縮率の高いwebp(ウェッピー)という画像フォーマットへ自動で変換してくれるWordPressのプラグイン

EWWW Image Optimizerの設定方法を紹介します。

ブログの画像を圧縮すると、サイトの表示スピードが速くなります。

EWWW Image Optimizerは、「画像を1枚ずつ圧縮するのは面倒」という方にとって、ぜひ入れておきたいプラグインです。

スポンサーリンク

EWWW Image Optimizerをインストール

EWWW Image Optimizerをインストールするには、

WordPressの「プラグイン」→「新規プラグインを追加」を押して、

「プラグイン」→「新規プラグインを追加」をクリック

右上の検索窓に「EWWW Image Optimizer」と入力します。

プラグイン「EWWW Image Optimizer」

今すぐインストール」を押してインストールしたら「有効化」を押して、

メニューの「設定」→「EWWW Image Optimizer」で設定画面を開きます。

「設定」→「EWWW Image Optimizer」で設定画面を開く

スポンサーリンク

EWWW Image Optimizerの設定方法

最初はこのような画面が表示されますが、「二度と表示しない」を押して次に進みます。

「EWWW Image Optimizer」のアンケート画面

次に進むと、EWWW Image Optimizerの設定画面が出てきます。

EWWW Image Optimizerの設定画面

ここで「メタデータを削除」と「WebP変換」の2つにチェックを入れます

「メタデータを削除」と「Webp変換」にチェックを入れる

メタデータとは、たとえば撮影した日付や場所といった画像の情報です。

ユーザーには特に必要のない情報なので削除しましょう。

これを削除することによって、画像のファイルサイズが小さくなります。

 

WebP(ウェッピー)変換」にチェックを入れると、

圧縮率が高くてファイルサイズの小さい「Webp」という画像フォーマットを自動で生成してくれます。

私事で恐縮ですが、Webpを使わずにJPGやPNG画像をそのまま使っていたころ、

サイトスピードを計測する「PAGESPEED INSIGHTS」で

改善できる項目の一番手に「次世代フォーマットでの画像の配信」が出てきました。

PAGESPEED INSIGHTSの「改善できる項目」の一番手に「次世代フォーマットでの画像の配信」が出てきた

Googleが推奨する次世代フォーマットの画像、すなわちこれが「WebP」です。

EWWW Image OptimizerでWebPの設定を行ったら、この項目は見事に消えました

ただし「WebP変換」にチェックを入れただけではWebP画像への変換はしてくれません。

残りの設定方法は次の章で説明します。

 

遅延読み込み」は、WordPressに元からある機能なので、ここはチェックを入れても入れなくてもどちらでも構いません。

以上の設定が終わったら、下にある「変更を保存」を押します。

「変更を保存」を押す

次に設定画面の上の方にある「ルディクロスモード」というボタンを押します。

「ルディクロスモード」のボタンを押す

「変換」タブを選択すると、「変換リンクを非表示」という項目があるので、そこへチェックを入れます。

「変換リンクを非表示」にチェックを入れる

ここにチェックを入れておかないと、

画像の拡張子を勝手に変更して、質の悪い画像を配信する恐れがあるので必ずチェックを入れましょう。

チェックを入れたら下にある「変更を保存」を押します。

スポンサーリンク

Webp(ウェッピー)変換の設定

次に、Webp(ウェッピー)変換の設定を行います。

先ほど「Webp変換」にチェックを入れたら、このようなコードが出てきたと思います。

「Webp変換」という項目にチェックを入れて現れたコード

このコードをレンタルサーバーの「.htaccess」に追記します

(サーバーの設定を行う前は、コードの右下には赤く「PNG」と表示されています。)

 

ちなみに「.htaccess」に追記せず、コードの下にある「リライトルールを挿入する」というボタンを押して

ルールが正常に検証されました」と表示されれば、それだけでおしまいです。

ですが、私はその方法がうまくいかなかったので、ここでは原始的なやり方を説明します。

※「リライトルールを挿入する」を押してみようと思っている方は、以下の方法で「.htaccess」の中身を確認(=バックアップ)してから押すことを推奨します。

 

たとえばエックスサーバーの場合は、サーバーパネルに「.htaccess編集」という項目があります。

エックスサーバーの「.htaccess編集」

「.htaccess編集」のドメインを選択する

ここを開いて、先ほどのコードを貼り付けます(すでに何かのコードがある場合は、その下へ貼り付けます)。

貼り付けたら「確認画面へ進む」→「実行する」を押します。

「.htaccess」にコードを貼り付けて「確認画面へ進む」を押す

ConoHa WINGの場合は「サイト管理」→「サイト設定」→「応用設定」で.htaccessの編集ができます。

正常に設定が完了すると、赤色表示の「PNG」が緑色の「WEBP」に変わります。

EWWW Image Optimizerの「PNG」表示が「WEBP」に変わった

スポンサーリンク

一括最適化でWebP画像を生成

これで、これからアップロードする画像はプラグインが自動で圧縮してくれたりWebPに変換してくれます。

ただし、EWWW Image Optimizerのインストール前にアップロードした画像はその限りではありません

これまでの画像を最適化するには、WordPressの「メディア」→「一括最適化」を押します。

「メディア」→「一括最適化」を押す

そして「最適化されていない画像をスキャンする」を押します。

「最適化されていない画像をスキャンする」を押す

すると最適化できる画像が抽出されるので「画像を最適化」を押します。

「画像を最適化」を押す

この作業は画像の数によってはかなりの時間がかかるので、お茶でも飲んでゆっくり待ちましょう。

EWWW Image Optimizerの一括最適化

作業中、ブラウザは閉じないでくださいね。

スポンサーリンク

WebPで配信されているかを確認する

以上の設定や作業が終わったら、実際に画像がWebPで配信されているか確認してみましょう。

確認するにはプレビュー画面の画像の上で、右クリック→「名前をつけて画像を保存」を押します。

WebPで配信されているか確認する方法(プレビュー画面で 右クリック→「名前をつけて画像を保存」を押す)

ファイルの種類がこのように「WEBPファイル」になっていれば成功です。

ファイルの種類が「WEBPファイル」になっていれば成功

確認はEWWW Image Optimizerをインストールする前の画像、すなわち「一括最適化」した画像でやってみて下さい。

スポンサーリンク

WebPにならない場合の対処法

もし「WEBP」にならない場合は、キャッシュが残っている可能性があります。

キャッシュを消す方法ですがGoogle Chromeの場合は、ページを開いた状態でキーボードの「F12」を押すか、画面上で右クリック→「検証」を押します。

するとデベロッパーツールというものが表示されます。

デベロッパーツールが表示された画面

この状態で「再読み込み」ボタンを右クリックします。

Google Chromeの「再読み込み」ボタンを右クリック

「ハード再読み込み」か「キャッシュの消去とハード再読み込み」を押すと画像がWebPに変わると思います。

もしくはデベロッパーの「Network」→「Img」を押すと、

ファイル名の拡張子は「.jpg」や「.png」でも、Typeが「webp」になっているので

WebPで画像が配信されていることが分かります。

「Network」→「Img」を押してこの状態になったら、キーボードの「Ctrl」と「R」ボタンを同時に押します。

「Network」→「Img」を押してから「Ctrl」と「R」ボタンを同時に押す

すると画像のタイプ(ファイルの種類)が表示されます。

デベロッパーツールで画像のTypeが「webp」と表示された

※「jpeg」や「png」になっている画像は自分でアップロードした画像ではありません。

 

ここが「webp」にならない場合は、EWWW Image Optimizerでもう一度、最適化しましょう。

というのは一括最適化を行っても、WebPへの変換が行われていないこともあるからです。

その場合は「WebPのみ」にチェックを入れてから「最適化されていない画像をスキャンする」を押します。

WebP変換されていない画像を抽出する

これでWebPに変換されていない画像が抽出されるので、改めて画像の最適化を行います。

 

あとはデベロッパーツールが「webp」でも、ファイル名の拡張子が「.jpg」や「.png」の場合は、

<picture> WebP リライト」に チェックを入れてみて下さい。

「<picture> WebP リライト」にチェックを入れた

拡張子も「.webp」に変わると思います。

スポンサーリンク

さらに画像を圧縮する方法

EWWW Image Optimizerは優れたプラグインですが、無料版の圧縮率は10~20%程度です。

もっと圧縮したい!という方には別のツールも紹介しておきます。

それはTinyPNG」という無料のWebツールです。

使い方は、TinyPNGの画面上に画像をドロップ→ダウンロードするだけです。

TinyPNGの画面上に画像をドロップ

こちらは50~80%程度の圧縮が見込めます。

この作業を行ってからWordPressへアップロードすると、TinyPNGとEWWWのダブル効果になります(私はこの方法です)。

スポンサーリンク

最後に

ということで今回はEWWW Image Optimizerの設定方法とWebP画像を配信させる方法でした。

ちなみに、たとえばこちらの画像は、

口を大きく開けたオッサンの画像

アップロードした圧縮済みの画像(JPEG)が102KBで、表示されているWebP画像はなんと60KBでした。

圧縮済みの画像がさらに4割も減るんですね(圧縮率は画像によって変わります)。

侮れませんね、WebP(ウェッピー)。

コメント