投稿画像の圧縮したらサイトの表示速度が改善された WordPress

公開:2014-12-11 / WordPress 制作・開発 / , , , ,
更新:2017-02-07

画像圧縮プラグインの話WordPressでポートフォリオ系など、画像を多く使うサイトを管理している方は、画像ファイルの扱いに困ったことはないでしょうか。

 

僕自身、WordPressで画像投稿可能なコミュニティサイトを運用しているので、ページの表示速度やサーバの容量を考えておく必要があると感じていました。

 

当初は、

 

容量が足りなくなったら、今契約しているレンタルサーバを上位プランに変更して、サーバ容量増やせばいっかな~

 

などと思っていました。

 

ところが、アップロードした画像を自動で圧縮してくれる便利なプラグイン「EWWW Image Optimizer」を見つけたので、ここで備忘録を兼ねて紹介します。

 

目的

上記で触れたとおり、

  • 画像投稿によるサーバ容量の圧迫
  • 画像表示において、ページの表示速度

 

この2点の解消です。

 

解消方法

調べたプラグイン「EWWW Image Optimizer」を適用すると、以下の効果があるため、こちらを導入することで問題を解消します。

  • 過去にアップした画像のファイル圧縮が一括でできる(個別に実施することも可能)
  • 設定しておけば、画像をアップしたタイミングで自動でサイズ圧縮をしてくれる
  • おまけに、テンプレートで利用している画像も圧縮してくれる

 

懸念として、画像サイズを圧縮すると、「画像が粗くなる」と思っている方も多いかと思います。

こちらは実際に見たほうが早いので、試した結果を後述します。

 

実装

プラグインを追加するページから、「EWWW Image Optimizer」を検索し、インストールします。

216_1

216_2

 

インストールが完了したら、プラグインを有効化します。

216_3

 

有効化が終わったら、設定をします。プラグインの一覧から、「EWWW Image Optimizer」を選択します。

216_4

 

すると、デフォルトで「Basic Settings」のタブが選択された状態で表示されます。

(期待値としてタブの一番左にある「Cloud Settings」にフォーカスがあたりそうですが、この「Cloud Settings」は有料のサービスなのでこのタブは気にしなくてよいです)

 

ここで、Remove metadataにチェックを入れます。

こうすることで、EXIF情報を削除することができます。

 

EXIF情報とは、撮影した日時や場所など情報のことです。デジカメなどで撮影すると、これらの情報は自動で保持されていたりします。

 

そのEXIF情報を削除することで、データを軽くできます。もし、キャプションとかで表示させたい場合はこのチェックをはずす必要があります。

216_5

 

次に、Advanced Settingsのタブですが、ここはデフォルトのままでよいと思います。

1点、「optipng optimization level」という項目に触れておきます。

 

これは、画像の圧縮のレベル設定になります。

「Lebel 2: 8trials」は、「レベル2:8回圧縮する」という意味になります。もっと圧縮することもできますが、やり過ぎると画像が劣化するので注意しましょう。

216_6

 

最後に、Conversion Settingsです。

ここで、「Hide Conversion Links」にチェックを入れます。

 

EWWW Image Optimizerは、有効化するとメディアライブラリの一覧から、アップロードしたJPGの画像をPNGに変換を行えるようになります。

 

ただ、利用イメージが思いつかないので、使うケースはないと思います。

 

このチェックを入れることで、JPG→PNG変換のボタンを非表示にできます。

216_7

 

すべてのタブで設定が終わったら、保存します。

保存が完了すると、下のキャプチャの矢印の位置に、KBが表示されます。

216_12

 

以上でプラグインの設定は完了です。

 

このままだと、新しくアップロードする画像については圧縮されますが、以前にアップロードした画像は圧縮されません。

そのため、すでにアップロード済みの画像の圧縮について説明します。

 

まずはアップロードした画像を個別に圧縮する方法です。

メディアライブラリーにアクセスし、各画像にある「Re-Optimize」をクリックします。

216_8_1

 

なお、必ずリスト表示にしてください。

タイル表示だと、下記、2枚のキャプチャのとおり「Re-Optimize」が表示されません。

216_8_2

216_8_3

 

次に、アップロードした画像を一括して圧縮する方法です。

メディアの「Bulk Optimize」にアクセスし、「Optimize Media Library」の箇所の「Start Optimizing」のボタンをクリックします。

216_9_1

 

すると、画面のステータスバーが動き出し、圧縮状況が確認できます。

画像の枚数次第で結構時間がかかります。

216_9_2

 

最後に、テンプレートで利用している画像の圧縮について説明します。

「Optimize Everything Else」の「Scan and optimize」ボタンをクリックします。

216_10_1

 

先ほどと同様にステータスバーが動き出し、バーの下に結果が表示されます。

216_10_2

 

ちなみに、直近35枚の圧縮状況はログがあるので、以下のキャプチャにある「Show Optimized Images」ボタンをクリックすると履歴が表示されます。

216_11_1

216_11_2

 

懸念事項の解消

冒頭で触れましたが、圧縮すると画像が粗くなる問題ですが、デフォルトの圧縮率で利用する限り気にならないと思います。

論より証拠ということで以下の画像を比較してみてください。

 

圧縮後

mk34251

 

圧縮前

mk34251

 

データ上、圧縮後のほうが容量が小さいため、何かしら表示上おかしく見えるはずですが、圧縮前と比べてみてもなんら変わりはありません。

通常ブログで展開する画像としては問題ないですね。

 

設定も簡単なのでトライする価値はあるのではないでしょうか。

 

Author:yukio iizuka
プロフィール画像
フリーランスとしてUX視点で業務支援しています。 HCD-Net認定 人間中心設計専門家 LEGO®︎ SERIOUS PLAY®︎ メソッドと教材活用トレーニング修了認定ファシリテーター Hi-Standard好きです。
http://yukioiizuka.com
mislead
MISLEADの記事に共感いただけましたら
いいねをお願いします。

コメント一覧

コメントはありません

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



       

© yukio iizuka All Rights Reserved...