ブログの画像を自動で圧縮してくれるプラグイン「EWWW Image Optimizer」

ブログに挿入される画像は小さい方が読み込みも早くなり、強いてはSEO対策にもなります。そのため、個別に画像を最適化して小さくしてからアップロードする必要があります。この手間を省くためにアップロード時に自動的に画像を小さく(圧縮)してくれるプラグインがあります。

Initializing...

画像圧縮してくれるプラグインとしては、ここで紹介するEWWW Image optimizerとWP Smush.itの2つがありますが、EWWW Image Optimizerの方が処理が早くて、こちらをお使いになっているブロガーが多いです。EWWW Image optimizerはアップロード時の自動圧縮のほかに、アップロード済みの画像も圧縮(後述)することも可能です。

では、このEWWW Image Optimizerのインストールと設定を紹介します。

EWWW Image optimizerのインストール前提条件

EWWW Image optimizerは、PHPがセーフモードで実行されているサーバ上では実行することが出来ません。

EWWW Image optimizerのインストール

管理画面を表示し、プラグインメニューから新規追加を選んで、検索窓に”EWWW Image optimizer”と入力してプラグインをインストールする。

ewww-image-optimizer1

見つかると以下のような結果を表示するので、赤枠内にある”いますぐインストール”をクリックしてインストールをおこなう。(下記の例では、インストール済みと表示されています)
ewww-image-optimizer2
無事インストールが完了したら、”プラグインを有効化”をクリック

ewww-image-optimizer3

プラグインのインストール直後は、プラグイン>インストール済みのプラグインを選択し、EWWW Image OptimizerのSettingsを選択し設定をおこないます。

ewww-image-optimizer4

 

Settingsを選択すると以下の画面が表示されますので、設定したいオプションを画面上部のタブ(4つあります)をクリックし、設定をおこないます。

ewww-image-optimizer12

設定するのは、以下の3つのみ

  1. Cloud Settingは有料版のオプションですので、何も入力しません
  2. Basic Settingsタブを選択、Remove meta dataをチェック
  3. Advanced Settingsタブを選択、disable pngoutをチェック
  4. Conversion Settingsタブを選択、Hide Conversion Linksをチェック
PNG画像の初期設定Lossless compressionではほとんど画像圧縮されず、GTmetrix等の計測サイトで評価されませんので、
Basic Settingsでは、PNG Optimization LevelをLossy Compressionを選択しなおしてください。
※もし画像劣化が認められる場合は、自己判断の上適切な選択を行ってください。
(2016年5月23日追記)

上記以外は必要に応じて設定してください
EWWW Image Optimizerの設定は以上です。

アップロード済みの画像を圧縮

EWWW Image Optimizerは、アップロード済み画像の圧縮も出来ます。上記の手順で設定まで終了したら、まずアップロード済みの画像の圧縮をしましょう。WordPressの管理画面の左の[メディア]メニューの下の[Bulk Optimize]を選択します。もし表示されていない場合は、メディアを一旦クリックすると表示されます。以下は圧縮中の画面内容です。

ewww-image-optimizer11

 

Bulk Optimizeを選択すると、以下のような画面に切り替わりStart Optimizingボタンが表示されるのでこれをクリックして圧縮処理を開始します。圧縮にはかなりの時間を要しますが、上記画面のとおり進捗バーにより進行状況を確認出来ます。もし時間がない場合は、途中で中断して再開することも出来ます。

ewww-image-optimizer10

EWWW Image optimizerをマルチサイトで使う場合の注意!
マルチサイト化したWordpressで当プラグインを利用する場合には、ネットワークレベルで有効化せずに、サイト毎のプラグインメニューで有効を選択するようにします。その際に下図のようなエラーが発生しますが、上記設定中のdisable pngoutにチェックすることにより解消することが可能です。ewww-optimizer_error

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク
ページ上部へ戻る