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

スピードアップ

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

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

先日、PageSpeed Insightsというツールを知りました。 PageSpeed Insightsとは、ウェブページの...
先日から、ちょこちょこブログの高速化をしています。 この前は、ブラウザキャッシュの設定をしてPageSpeed Insight...

これらの作業により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

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

  5. 名前:木村 投稿日:2018/04/08(日) 11:16:23 ID:716fa463d

    初めまして、木村と言います。非常に参考になる記事を読ませていただき感謝しています。すでに下記2つは自己対応でき感謝しきれません。

    ・ブラウザキャッシュの設定
    ・リソースを圧縮して転送サイズを減らす

    リソース圧縮は自己サイトではなく外部ソースの圧縮だと調べて知りました。同じソースをXサーバーに入れても変化なしでしたのでグーグルフォーラムでしりました。
    https://productforums.google.com/forum/#!topic/webmaster-ja/dwHNdJc6GCY

    今回の記事で気になったのは、「TinyPNG」を使ったあとです。画像を一括圧縮した後のサイト更新画像は圧縮なしでしょうか?
    ワードプレスでブログを運営していますが、圧縮後が気になりました。画像は「ping」形式です。過去には同一ブログで「JPEG」も使っていました。

    現在は「EWWW Image Optimizer」を使ってJPEG表示にされているのでしょうか?この辺りが疑問です。過去記事にも関わらず申し訳ありません。よろしくお願い致します。

  6. わいひら 名前:わいひら 投稿日:2018/04/10(火) 00:02:51 ID:61b5b1e46

    はじめまして。

    「TinyPNG」で圧縮した場合、画像は、そのままWordPressのメディアライブラリにアップしています。
    ただアップロード時、「EWWW Image Optimizer」プラグインによる圧縮は再度行われているかもしれません。

    僕は拡張子を変更するようなことはしていません。
    JPEGの画像はJPEGのまま、PNGの画像はPNGのまま圧縮しています。
    PNGから、JPEGに変更すると、赤がにじんで画像が汚くなってしまうことがあるので。

  7. 名前:木村 投稿日:2018/04/10(火) 14:21:18 ID:8df1c6bbc

    再度質問申し訳ありません。私の質問の仕方が悪かったようです。

    過去記事などは「TinyPNG」で圧縮すればよいことはわかりましたが、新しく記事を書いた時の画像はどのように圧縮しているのか知りたかっただけです。

    新規記事については「EWWW Image Optimizer」プラグインを使っているということでしょうか。何度も申し訳ありません。

  8. わいひら 名前:わいひら 投稿日:2018/04/11(水) 12:08:16 ID:b73f0f4d2

    最新記事は、投稿をポストした時に「EWWW Image Optimizer」によってjpg、png、gifでロスレス圧縮(デフォルト設定の無料版)が行われます。

    ただ、過去記事であったとしても「EWWW Image Optimizer」で対応可能です。
    その際は、Wordpress管理画面の「メディア→一括最適化」を選択します。

    そして「最適化されていない画像をスキャンする」ボタンを実行して

    最適化が必要な画像があれば、「最適化を開始」ボタンを押せばOKです。

  9. 名前:木村 投稿日:2018/04/12(木) 10:47:46 ID:1beab1d19

    わいひら様、画像まで用意していただき大変感謝しております。また「TinyPNG」を使わなくても過去記事の画像が変更できることを教えていただき感激しております。

    実は、「TinyPNG」へ入れるホルダーを探しましたが私には分かりませんでした。エックスサーバーでしたがFTPなどを使ったことが無いため結局分かりませんでした。今回のコメント大変感激しています。上記のように圧縮できればグーグル評価も多少上がるかもしれません。

    ここでもう一つ教えていただきたいのですが、「EWWW Image Optimizer」プラグインはキャッシュ系のプラグインではないため、コンソールサーチのindexなどに影響は無いと思っていますがどうでしょうか。重ね重ね申し訳ありません。

    ネットで色々と探すとキャッシュ系のプラグインは色々と悪さをすることが分かり怖いんです。私は「わいひら様」が「.htaccess」に書き込んだ記事を見て同じことをさせていただきました。

    先が見えてきたみたいでとても嬉しく思います。本当にありがとうございます!!

  10. わいひら 名前:わいひら 投稿日:2018/04/12(木) 12:52:45 ID:d02d8f28a

    とは言っても、「EWWW Image Optimizer」の無料版ができるのは、圧縮率の低いロスレス圧縮なのでどこまで検索エンジンに影響あるかは分かりません(データを全く損なわずに復元できるような圧縮方式という利点もある)。

    ただ、多少なりともページ読み込みサイズが少なくなるのは、訪問者にとって利便性が上がることになるので、そういった意味で悪いことはないと思っています。

    「コンソールサーチのindexなどの影響」というのがどういったことをさすのか分からないので、ちょと何とも言えないです。けれど、画像サイズが下がり、表示スピードが速くなれば「遅いよりは速いほうがいい」と言って意味で、ランキング評価といった意味では、微妙-----ながら上がるかもしれません。

    けれど、「高速化による評価」よりも、「コンテンツが優れているという評価」の方が断然されると思うので、コンテンツを充実させる以上の影響はほぼないと言っていいのではないかと思います。

    「EWWW Image Optimizer」を使っていて、これまで不具合を感じたことはないのですが、一応画像を一括で変換するプラグインです。なので、最適化の前には、Wordpressのバックアップを取っておいた方が良いかと思います。
    バックアップは、Wordpressのアップデートの時も言われることですけど、人の作るものなので必ず何かしら不具合が出る可能性は無いとは言えません。その時のために、いつでも復旧出来る体制をとっておくのは重要かと思います。