EWWW Image Optimizerで表示速度を高速化!

  • このエントリーをはてなブックマークに追加
  • Pocket

ブログを書いていく際に大切なのは見てもらう事ですよね。

その際に必要となってくる要素の1つとして画像の使用があります。文章だけ羅列していても読む気が失せるのは当たり前の話で、それを解消するという意味合いでも画像は多く使われています。

おそらくあなたも毎記事、画像を盛り込んでいるかと思いますが、実はそのままにしておくと画像ファイルの容量は結構な負担をかけるので、重くなってしまうんですね。

ですので、今回は以下3つ

  • 画像投稿時に自動でファイルを圧縮
  • 過去に投稿した画像ファイルの一括圧縮
  • テンプレート内の画像を一括圧縮

を行ってくれる優秀プラグイン「EWWW Image Optimizer」のインストール〜設定、使い方までを網羅して紹介したいと思います。

EWWW Image Optimizer

EWWW Image Optimizerのインストール方法

 

まずは「プラグイン」⇒「新規追加」の順に進んで検索画面で「EWWW Image Optimizer」と入力して下さい。

EWWW Image Optimizer1

次に「いますぐインストール」をクリックします。

EWWW Image Optimizer2

そして最後に「プラグインを有効化」をクリックしてインストールは完了です。

EWWW Image Optimizer3

これでインストールと有効化が終わったので、次は設定に入ります。

 

EWWW Image Optimizerの設定方法

 

インストールが完了するとダッシュボードの設定の中に「EWWW Image Optimizer」と出てくるのでクリックして下さい。

EWWW Image Optimizer9

そうすると右上に画像のような4つの項目が表示されるので左から順に設定していきます。

EWWW Image Optimizer4

 

1.Cloud Settingsの設定

 

まずは「Cloud Settings」ですが、ここは有料オプションのため特に何も設定する必要は無いです。

スクリーンショット 2014-08-30 15.51.09

使い道としては、プラグインを導入する事によるサーバー負荷を軽減したいという方が使うぐらいです。

 

2.Basic Settingsの設定

 

ここでは「Remove metadata」にチェックを入れて下さい。

EWWW Image Optimizer5

ここにチェックを入れる事により、画像ファイルに付いている不要なメモなどを自動で削除してくれるため、より画像ファイルを圧縮してくれます。

 

3.Advanced Settingsの設定

 

ここでは下の方にある「disable pngout」にのみチェックを入れて下さい。

EWWW Image Optimizer7

このpngoutを無効化にする項目ですが、有効にするとかなり面倒な設定をしなければいけないのでチェックは不要です。

 

4.Conversion Settingsの設定

 

ここでは「Hide Conversion Links」のみにチェックを入れて下さい。

EWWW Image Optimizer8

ここにチェックを入れておかないと、EWWW Image Optimizerにデフォルトで付いている機能のjpgやpngの変換機能が有効になってしまいます。

これが有効になっていると画像の質にソフトが合わせたり、フォルダ内で画像が増えて処理が複雑になってしまいます。

ですのでチェックをいれて無効にしておきましょう。

 

EWWW Image Optimizerの使い方

 

自動で新規投稿の画像ファイルを圧縮してくれると言いましたが、実際にファイルが圧縮されているのか確認することができます。

ダッシュボード⇒メディア⇒ライブラリで投稿した画像一覧が見れます。

EWWW Image Optimizer10

画像の赤枠部分で囲んだ「Reduced by ◯◯%」が圧縮されたサイズの%です。そしてその下の「Image Size◯◯kB」が圧縮後のサイズです。

 

1.過去に投稿された画像の一括圧縮

 

EWWW Image Optimizerをインストールするとメディアに以下のように「Bulk Optimizer」と追加されるのでクリックします。

EWWW Image Optimizer11

そうするとこのような画面がでてくるので「Start optimizing」をクリックすると一括圧縮が開始されます。

EWWW Image Optimizer

そして、画像の量によっては10分程かかりますが、このように「Finished」と表示されたら完了です。

EWWW Image Optimizer12

これだけで過去に投稿された画像も一括圧縮できます。

 

2.テンプレート内の画像を一括圧縮

 

WordPressのテンプレートは画像を扱っているものが多々あるので、それもついでに圧縮しておきましょう。

先ほどと同様にダッシュボード⇒メディア⇒Bulk Optimizeと進むとこのような項目があるので「Scan and optimize」をクリックします。

EWWW Image Optimizer14

これで全て完了です。以後は全て自動で圧縮してくれるので、特に何かをいじる必要はないです。

 

まとめ

 

・EWWW Image Optimizerインストール
・EWWW Image Optimizer設定
1.Cloud Settingsの設定
2.Basic Settingsの設定
3.Advanced Settingsの設定
4.Conversion Settingsの設定
・EWWW Image Optimizerの使い方
1.過去に投稿された画像の一括圧縮
2.テンプレート内の画像を一括圧縮

 

となります。

この画像ファイルのサイズ対策をするだけで、ページ表示速度は圧倒的に違ってくるので是非やってみて下さい。

そして、画像の読み込み順序を変更してページ表示速度を高速化するプラグイン「Lazy Load」もLazy Load|ページ表示速度を高速化するプラグインで紹介しているので、こちらも導入するとより効果的です。

 

  • このエントリーをはてなブックマークに追加
  • Pocket

SNSでもご購読できます。

コメントを残す

*