![](https://katsuhiroblog.com/wp-content/uploads/2019/03/a-1024x429.jpg)
- WordPressでブログをやっているが、画像圧縮をやった方が良いらしい。なんでだろう?
- 画像圧縮をしたら具体的にどのくらい効果があるんだろう?
- WordPressの便利なプラグインがあれば教えてほしい。
こういった質問にお答えします。
実際にこのKatsuhiroBlogで画像圧縮を行い、その効果を検証しました。
検証した結果、画像圧縮がかなり効果的なことがわかったので記事にしました。
結論、「pngじゃなくてjpgを使いましょう!」です。
次の順番で進めていきます。
- 画像圧縮を行う理由
- 画像圧縮を行う方法
- 画像圧縮後の検証結果
画像圧縮を行う理由
画像圧縮を行う理由はなんでしょうか?
理由はシンプルです。ファイルサイズの大きい画像があると、ページの表示が遅くなるからです。
では具体的にどのくらい表示が遅くなるか確認してみましょう。
「PageSpeed Insights」でページの表示速度を確認できます。
「PageSpeed Insights」とはGoogle公式のツールで、表示速度の評価だけでなく、表示速度の改善案も教えてくれます。
試しに、このKatsuhiroBlogのページを評価してみます。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/b-1024x386.jpg)
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/c-1024x367.jpg)
このように「モバイル(スマホ)用」と「パソコン用」それぞれの評価結果を出してくれます。
パソコン用の評価結果は「速い」でしたが、モバイル用の評価結果は「平均」ですね。
次に、時間がかかっている処理を見てみましょう。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/d-1024x305.jpg)
「次世代フォーマットでの画像の配信(画像の表示)」で「5.55秒」と明らかに時間がかかってますね。中身を見てみましょう。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/e.jpg)
pngの画像ファイルのサイズが大きく、時間がかかっているようです。
画像サイズが大きいと、表示速度が遅くなることがわかりました。
つまり、画像圧縮してサイズを減らしたら改善するということですね。
画像圧縮を行う方法
画像圧縮を行う方法は以下2つです。
- そもそもの画像のファイル形式を変換する
- WordPressのプラグインを使って自動圧縮する
そもそもの画像のファイル形式を変換する
画像圧縮を行う1つ目の方法として、そもそもの画像のファイル形式を変換する方法があります。
画像のファイル形式は「jpg」「png」が有名ですね。
基本的に「png」の方がファイルサイズが大きくなります。
例えば、画像をコピーしてWordPressに貼りつけると自動的に「png」になります。実際にやってみます。
画像を右クリックして「画像をコピー」を選択します。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/4255ecad936e4cd1e7822b7cd9d7c05e.jpg)
WordPressの投稿画面で「貼り付け」を押します。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/f86d6921a217ccf51113e69c27326c88.jpg)
貼り付けた後の画像のサイズを見てみると、「306.12KB」ありますね。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/809ec73f01e6c019f1fc0096c5c1f3f2.jpg)
次にコピーではなく、画像をjpgに変換してWordPressにアップロードしましょう。
画像を右クリックして「名前を付けて画像を保存」を選択します。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/809ec73f01e6c019f1fc0096c5c1f3f2-1.jpg)
適当な場所に保存した後、「ペイント」で開きましょう。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/image-320a.jpg)
「jpg」で保存し直します。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/625ad5031bc17578b6553facea2c63c2.jpg)
WordPressの投稿画面で「画像」のアップロードを行います。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/fa34cfdda44d45170c84cda3a7081a68.jpg)
アップロード後のファイルサイズを見てみると、「88.50KB」ありますね。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/image-320a-1.jpg)
約4分の1くらいにサイズが小さくなりました。明らかに「jpg」に変換した方がサイズが小さいですね!
なので、画像は「png」ではなく「jpg」に変換してアップロードしましょう。
WordPressのプラグインを使って自動圧縮する
WordPressのプラグインを使って自動圧縮する方法もあります。
これはとりあえずやっておいた方が良いです。
理由はプラグインを入れておけばアップロード時に自動で圧縮してくれるようになるからです。
「EWWW Image Optimizer」を使います。実際に使ってみましょう。
WordPressの管理画面から「プラグイン」→「新規追加」を押しましょう。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/2be7e4a0b6e1b1b1a9b5bb34d1c20dd9.jpg)
「EWWW Image Optimizer」を検索して、「今すぐインストール」→「有効化」を押してください。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/321a99513664ea2294b5ebfaec9c7e43-1-1024x356.jpg)
インストールが出来たので、実際に画像をアップロードしてみましょう。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/21fa3902eff8d08c0c7216cff14d6e50-1024x180.jpg)
「77KB」のファイルをアップロードしてみます。
アップロード後のサイズは「49.54KB」になりました。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/9.jpg)
少しですが圧縮されましたね。
「EWWW Image Optimizer」のプラグインを入れておけばこのように自動で圧縮してくれます。
なので、とりあえず入れておきましょう。
画像圧縮後の検証結果
画像の圧縮が終わったので、ページの表示速度がどれだけ改善したか確認しましょう。
画像圧縮前と同じように「PageSpeed Insights」でページの表示速度を確認します。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/image-320a-2-1024x403.jpg)
評価は「70」→「77」に上がりました。
![](https://katsuhiroblog.com/wp-content/uploads/2019/03/1-1024x264.jpg)
「次世代フォーマットでの画像の配信(画像の表示)」を見てみると、圧縮した後は「1.5秒」となりました。
圧縮する前は「5.55秒」だったので、 「4秒」改善されましたね!
やはり、「png」を「jpg」に変換したのが大きかったようです。
最後に
今回は画像圧縮とその効果について、お話ししました。
- 画像は「png」じゃなくて「jpg」使う
- プラグインを使って自動圧縮する
がポイントでした。
確かに、画像圧縮でページ表示速度を改善できますが、こだわりすぎて時間をかけるのは、良くありません。
本質はブログの内容をちゃんと考えて、書くことの方が重要なので、ほどほどにしましょう。
最後に、今回の記事内容と真逆のことを言ってすみません・・・
以上です。