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

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

 

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

 

当初は、

 

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

 

などと思っていました。

 

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

 

目的

上記で触れたとおり、

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

 

この2点の解消です。

 

解消方法

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

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

 

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

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

 

実装

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

 

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

 

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

 

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

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

 

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

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

 

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

 

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

 

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

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

 

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

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

 

最後に、Conversion Settingsです。

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

 

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

 

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

 

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

 

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

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

 

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

 

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

 

懸念事項の解消

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

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

 

圧縮後

 

圧縮前

 

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

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

 

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