画像を最適化(圧縮)してWordPressブログを高速化する方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

スピードアップ

先日から、ブログの高速化をしています。

とりあえずこれまでに以下の高速化作業をしてきました。

ブラウザキャッシュの設定をしてWordpressブログの表示スピードを上げる方法
先日、PageSpeed Insightsというツールを知りました。 PageSpeed Insightsとは、ウェブページの...
リソースを圧縮して転送サイズを減らしブログを高速化する方法(CSS、JS、WEBフォントなどの圧縮)
先日から、ちょこちょこブログの高速化をしています。 この前は、ブラウザキャッシュの設定をしてPageSpeed Insightsのスコ...

これらの作業によりPageSpeed Insightsのスコアが、61→77とかなり改善してきました。

毎回、一つ一つ成果を確かめながら高速化させたいので、今回は「画像最適化してブログの高速化」を行いたいと思います。

photo by Rami ™

スポンサーリンク
レクタングル(大)広告

画像の最適化って?

簡単に言うと、ブログで使っている画像の画質は保ったまま圧縮して転送サイズを減らし、ブログの表示スピードを速くすることです。

PageSpeed Insightsの提案には以下のように出ています。

PageSpeed Insights提案画像の最適化前

画像を最適化する
画像を適切にフォーマット化して圧縮すると、データ サイズを大きく削減できます。
次の画像を最適化すると、サイズを 41.6 KB(15%)削減できます。

画像を適切に圧縮することで、41.6KB全体の画像サイズを削減できるようです。ちょうど上にあるPNG画像が22KBなので、トップページだけでその約2倍削減できることになります。

今回の方法では、ブログの記事などにも使われているすべての画像を最適化します。ですので、まだ未対応の場合は今回の方法で、かなりサーバーの負担を減らすことができます。

画像の最適化方法

画像の圧縮方法については、

  1. WordPressテーマに使われている画像の圧縮
  2. WordPressメディアにアップロードされている画像の圧縮

では異なった圧縮方法をとります。

以下でそれぞれ説明していきたいと思います。

1.テーマに使われている画像の圧縮

PageSpeed Insightsの提案などで指摘されているWordpressテーマで使用されている画像を圧縮するには手作業で行うのが手っ取り早いと思います。手作業とは言っても、特別なソフトは必要なく画像を圧縮するWEBサービスを使用します。

以下で、PNG画像とJPEG画像の圧縮方法について説明したいと思います。FTPソフトなどでテーマのイメージフォルダ内の未圧縮画像をダウンロードしておいてください。

PNG画像の圧縮

PNG画像の圧縮には、TinyPNGを使うと簡単です。(追記:現在は、JPEGでも使用できます。)

このツールは、より圧縮度が高い不可逆圧縮(lossy圧縮)です。ロスレス圧縮をしたい場合は、Kraken.ioを利用するとできます。

使い方は簡単で、PNG画像をドロップボックスにD&Dで放り込むだけです。すると自動的に画像が圧縮されるので「download」リンクから圧縮画像をダウンロードするだけです。

PNGファイルサイズを小さく

全体で61%もPNG画像が圧縮されました。

追記:以前、ロスレスと書いていましたが、非可逆圧縮なので多少のロスはあります。ただ、素人目にはまずわからないと思います。コメントにて間違いを教えていただきました。ありがとうございます。

JPEG画像の圧縮

JPEG画像は、JPEG & PNG Image Compressionなどで圧縮します。

このツールも、不可逆圧縮(lossy圧縮)です。ロスレス圧縮をしたい場合はKraken.io

こちらも使い方は簡単で、JPEG画像をD&Dでドロップボックスに放り込みます。

JPEG & PNG Image Compression

後は画像を選択して、「SAVE」ボタンから画像を保存してください。

JPEG画像を圧縮する

画像の圧縮作業が終わったら、FTPソフトなどでアップロードして、テーマで使用されている画像を圧縮後のファイルで上書きします。

2.メディアにアップロードされている画像の圧縮

こちらは、記事などで使用されているメディアにアップロードされた画像の圧縮方法です。

WordPressプラグインを使用して自動処理させるので、テーマ画像を圧縮するより手間はかかりません。

その手段とは、「EWWW Image Optimizer」というプラグインを使った方法です。Wordpress上で「EWWW Image Optimizer」をインストールしてください。

EWWW Image Optimizerの設定

「設定→EWWW Image Optimizer」から「EWWW Image Optimizer Settings」画面を表示させてください。

「Optimization Settings」の項目から、「Remove metadata」にチェックを入れてください。

This wil remove ALL metadata EXIF and comments

この設定を行うと、JPEG画像に埋め込まれているExif情報という撮影情報を写真から取り除いてくれます。一つ一つの画像のExifサイズは大したことないかもしれませんが、ブログに画像が多いほど、訪問者が多いほどこの設定は生きてきます。

EWWW Image Optimizerで一括圧縮

※プラグインを使った一括作業を行う場合には、一応念のためバックアップを取ることをお勧めします。

EWWW Image Optimizerを普段から使っている場合は、アップロード時に画像が圧縮されているので以下の作業は必要ありません。

メディアの画像を一括で圧縮するには「メディア→Bulk Optimize」に移動し「Import images」ボタンを押してください。

Bulk Optimizeインポート

重複して、最適化(圧縮)するのを防ぐのに、メディアライブラリの画像をデータベースに取り込みます。

インポート中画面が出るのでしばらく待ちます。

Bulk Optimizeインポート後

終了すると、再び「メディア→Bulk Optimize」に移動し「Start optimizing」ボタンを押してください。

Bulk Optimize一括で圧縮

画像の最適化(圧縮)作業が開始されます。この作業は、画像の量によっては1時間以上かかることもあるので、おやつでも食べて気長に待ちましょう。

Bulk Optimize圧縮中

全て終了したら、メディア画像の圧縮作業は終了です。

画像の最適化(圧縮)前と後の変化

PageSpeed InsightsGTmetrixWebsite speed testで、スコアを計測してみました。

PageSpeed Insights

だいたい同時刻に計測。

画像の圧縮前

PageSpeed Insights画像の最適化前

画像の圧縮後

PageSpeed Insights画像の最適化後

スコアが76→79に改善しました。

受けていた提案は、以下のように改善しました。

画像の圧縮前

PageSpeed Insights提案画像の最適化前

画像の圧縮後

PageSpeed Insights提案画像の最適化後

とりあえず、自分のサーバーにあるトップページ画像は圧縮して40KBくらいは削減できました。

GTmetrix

だいたい同時刻に計測。

画像の圧縮前

GTmetrix画像の圧縮前

画像の圧縮後

GTmetrix画像の最適化後

ページスピードグレードが90%(A)→91%(A)に改善。YSlowグレードは、なんだか知らないけど69%(D)→68%(D)に下がってしまいました

トータルページサイズも、1.18MBだったページサイズが、1.04MBに減少しています。

個別指標は、こんな感じで変化しました。

画像の圧縮前

スピード

GTmetrix指標画像の最適化前

YSlow

GTmetrix YSlow画像の最適化前

画像の圧縮後

スピード

GTmetrix指標画像の最適化後

YSlow

GTmetrix YSlow画像の最適化後

スピードに関しては、目立ったアップはなく微妙に上昇している感じ。

YSlowに関しては、「Avoid URL redirects」が下がってしまいました。詳細を見ると外部へのリダイレクトが原因のようなので今回の画像最適化(圧縮)とは関係ないようです。

Avoid URL redirects

Website Speed Test

だいたい同時刻に計測。

画像の圧縮前

Website Speed Test画像の最適化前

画像の圧縮後

Website Speed Test画像最適化後

グレードが81→84に。ページサイズが減っています。

以下は各パフォーマンスです。

画像の圧縮前

Website Speed Test指標画像最適化前

画像の圧縮後

Website Speed Test指標画像最適化後

数値が微妙に増減していますが、平均値は81→84に上がっています。

まとめ

今回は、以下の2つの作業を行いました。

  1. テーマで使われている画像の手動による圧縮
  2. プラグインを使ってメディアライブラリの画像を圧縮

生まで使われている未圧縮画像は、大した数ではなかったですし、メディア画像の圧縮は、プラグインがほとんどやってくれるので、大した手間もかかりませんでした。

作業時間にしたら30分もかからなかったと思います。(プラグインの自動実行時間は除く)

簡単な作業で結構画像をサイズを削れて、効果的なので、普段から画像が重いなと感じている場合は、今回の方法を試してみてください。

『画像を最適化(圧縮)してWordPressブログを高速化する方法』へのコメント

  1. 名前:ケイタ 投稿日:2014/09/18(木) 12:57:57 ID:646b545ac

    「EWWW Image Optimizer」知りませんでした。
    これは便利ですね。

  2. わいひら 名前:わいひら 投稿日:2014/09/18(木) 18:11:46 ID:72deab49a

    そうなんですよ!
    これでかなりサーバーの負荷を軽減出来ます。

  3. 名前:通りすがり 投稿日:2015/01/15(木) 15:34:15 ID:826c07542

    タイトルに「ロスレス圧縮」とありますが、ロスレス圧縮は”圧縮前後でデータの劣化が0”であるものを指しますので、これはミスリードになってしまうと思われます。
    TinyPNGもトップページで”smart lossy compression”とlosslessでないことが示されています。

  4. わいひら 名前:わいひら 投稿日:2015/01/15(木) 17:23:09 ID:754088b65

    完全に勘違いしていたようです。
    早速間違っている箇所を、修正させていただきました。
    ご指摘いただきありがとうございます!