EWWW Image Optimizerの設定方法と画像が表示されない場合の対策方法
2021.06.30
サイトのスピードが遅い場合、おおよその理由がサーバーのスペックがよくない、javascriptや外部ファイルの読み込み、画像が適切なサイズになっていないことが多いです。
特に画像はこだわり過ぎてついつい画像のファイルサイズが大きくなってしまうこともありますね。
今回は、そんな画像を圧縮してくれるプラグインEWWW Image Optimizerについてご紹介していきます。
EWWW Image Optimizerとは
EWWW Image Optimizerとは、WordPressで使える、画像を劣化させることなく、画像を最適化してくれるプラグインです。
インストールするだけで、今後Wordpressにアップロードする画像のファイルサイズを自動で小さくできたり、既存アップしている画像も圧縮してくれます。
特にモバイル版では画像が多くなれば多くなるほど、サイズが多くなりページの表示速度が遅くなったりしますし、画像の読み込みが遅いだけでユーザーが離脱してしまうかもしれません。
そんな時に画像が自動で圧縮できるEWWW Image Optimizerのようなツールがあると、サイトアップ時の労力が削減できますね。
特にページスピードインサイトで、適切なサイズの画像や次世代フォーマットでの画像の配信が改善できる項目として表示された場合、EWWW Image Optimizerをインストールして適切な設定をした場合、改善できることがあります。

それではEWWW Image Optimizerのインストール手順や設定方法を見ていきます
EWWW Image Optimizerのインストール方法
EWWW Image Optimizerのインストールは以下のとおりです。基本的には画面に沿って、インストールして有効化するだけです。
1.プラグインから「新規追加」をクリック

2.検索窓から「EWWW Image Optimizer」と入力

3.検索結果の中からEWWW Image Optimizerを選択し「今すぐインストール」をクリック

4.インストールが終わったら「有効化」をクリック

EWWW Image Optimizerの設定方法
EWWW Image Optimizerのインストールが終わったら次に設定をしていきましょう。
インストール後のEWWW Image Optimizerの設定手順
1.サイトを高速化と保存スペースを節約にチェック入れ、「今は無料モードのまま」にするに選択して「次」をクリック

2.「設定を保存」ボタンをクリックする。
以下がサイトの推奨設定ですが、サイトによっては画像が表示されない場合があります。
その場合、「遅延読み込み」が原因であることがあるので、不安な場合はチェックボックスを外すと良いです。ただ後からでも設定は解除できますので、わからない場合は一旦デフォルトのままで保存すると良いです。

3.「完了」ボタンをクリックする。

EWWW Image Optimizer設定後の最適化方法
EWWW Image Optimizerの設定が完了したら、すでにアップロードしている画像を最適化してみましょう。
1.メディアから「一括最適化」を選択し、「最適化されていない画像をスキャンする」をクリック
2.一括最適化が始まります。画像が多いほど時間がかかります。

EWWW Image Optimizerで最適化された後のスコア比較
EWWW Image Optimizerでは上記のように簡単に、画像の最適化ができます。
実際に最適化した後でページスピードインサイトで、チェックをかけてみました。
・EWWW Image Optimizerで最適化する前のスコア

上記のように50点ですね。
以下のようにページスピードインサイトでも改善化できる項目で画像関連が表示されています

・EWWW Image Optimizerで最適化する後のスコア

88点とスコアが伸びました。
ページスピードインサイトでも改善化できる項目で画像関連が表示されなくなりました
EWWW Image Optimizerを使う際の注意点
上記のようにEWWW Image Optimizerは簡単に画像を最適化してくれますが、注意点があります
画像が表示されないこともある
以下のように画像が表示されないこともあります。

この場合、EWWW Image Optimizerの以下の設定「遅延読み込み」のチェックを外すと表示されることがあります

それでも解消されない場合は、一旦プラグインの有効化を外してみましょう
場合によってはワードプレスにログインできないことも
筆者は2021年6月に、EWWW Image Optimizerをアップデートした際、以下のエラーメッセージが表示されワードプレスにログインできない不具合がありました

Parse error: syntax error, unexpected ')' in /home/サイト名/public_html/wp-content/plugins/ewww-image-optimizer/bulk.php on line 343
上記のメッセージを読むと「bulk.php」というファイルに不具合があるようでした。
幸い、アップデートする前にバックアップファイルをとっていたので、前のバージョンのbulk.phpファイルをコピーしたら、正常にログインできるようになりました。
初めてインストールする場合は問題ないかもしれませんが、このようになにかプラグインをバージョンアップする際には、事前にバックアップを取っておくようにすると、すぐに対応できます。
まとめ
今回はEWWW Image Optimizerについて解説しました。便利なプラグインですが、使い方によっては、画像が表示されないこともあります。その場合、ワードプレスのプラグインに頼らず、無料で画像をアップロードするだけで圧縮してくれるTinyPNGといったツールがあります。この場合、圧縮した後FTP上でアップロードする必要がありますが、1枚1枚画像を圧縮する必要がないので便利です。
なおその他の画像圧縮のツールは以下の記事紹介にありますので、是非参考にしてみてください。
WEB担当者も行うべき!サイトにおける画像の最適化とは
関連