KatsuhiroBlog

妻と娘が大好きな現役エンジニア。IT、ブログ、投資を中心に発信します。

ブログ

【WordPress】画像圧縮の方法【実際に検証してみました】

更新日:

  • WordPressでブログをやっているが、画像圧縮をやった方が良いらしい。なんでだろう?
  • 画像圧縮をしたら具体的にどのくらい効果があるんだろう?
  • WordPressの便利なプラグインがあれば教えてほしい。

こういった質問にお答えします。

実際にこのKatsuhiroBlogで画像圧縮を行い、その効果を検証しました。

検証した結果、画像圧縮がかなり効果的なことがわかったので記事にしました。

結論、「pngじゃなくてjpgを使いましょう!」です。

次の順番で進めていきます。

  1. 画像圧縮を行う理由
  2. 画像圧縮を行う方法
  3. 画像圧縮後の検証結果
スポンサードサーチ

画像圧縮を行う理由

画像圧縮を行う理由はなんでしょうか?

理由はシンプルです。ファイルサイズの大きい画像があると、ページの表示が遅くなるからです。

では具体的にどのくらい表示が遅くなるか確認してみましょう。

PageSpeed Insights」でページの表示速度を確認できます。

「PageSpeed Insights」とはGoogle公式のツールで、表示速度の評価だけでなく、表示速度の改善案も教えてくれます。

試しに、このKatsuhiroBlogのページを評価してみます。

このように「モバイル(スマホ)用」と「パソコン用」それぞれの評価結果を出してくれます。

パソコン用の評価結果は「速い」でしたが、モバイル用の評価結果は「平均」ですね。

次に、時間がかかっている処理を見てみましょう。

「次世代フォーマットでの画像の配信(画像の表示)」で「5.55秒」と明らかに時間がかかってますね。中身を見てみましょう。

pngの画像ファイルのサイズが大きく、時間がかかっているようです。

画像サイズが大きいと、表示速度が遅くなることがわかりました。

つまり、画像圧縮してサイズを減らしたら改善するということですね。

画像圧縮を行う方法

画像圧縮を行う方法は以下2つです。

  • そもそもの画像のファイル形式を変換する
  • WordPressのプラグインを使って自動圧縮する

そもそもの画像のファイル形式を変換する

画像圧縮を行う1つ目の方法として、そもそもの画像のファイル形式を変換する方法があります。

画像のファイル形式は「jpg」「png」が有名ですね。

基本的に「png」の方がファイルサイズが大きくなります。

例えば、画像をコピーしてWordPressに貼りつけると自動的に「png」になります。実際にやってみます。

画像を右クリックして「画像をコピー」を選択します。

WordPressの投稿画面で「貼り付け」を押します。

貼り付けた後の画像のサイズを見てみると、「306.12KB」ありますね。

次にコピーではなく、画像をjpgに変換してWordPressにアップロードしましょう。

画像を右クリックして「名前を付けて画像を保存」を選択します。

適当な場所に保存した後、「ペイント」で開きましょう。

「jpg」で保存し直します。

WordPressの投稿画面で「画像」のアップロードを行います。

アップロード後のファイルサイズを見てみると、「88.50KB」ありますね。

約4分の1くらいにサイズが小さくなりました。明らかに「jpg」に変換した方がサイズが小さいですね!

なので、画像は「png」ではなく「jpg」に変換してアップロードしましょう。

WordPressのプラグインを使って自動圧縮する

WordPressのプラグインを使って自動圧縮する方法もあります。

これはとりあえずやっておいた方が良いです。

理由はプラグインを入れておけばアップロード時に自動で圧縮してくれるようになるからです。

「EWWW Image Optimizer」を使います。実際に使ってみましょう。

WordPressの管理画面から「プラグイン」→「新規追加」を押しましょう。

「EWWW Image Optimizer」を検索して、「今すぐインストール」→「有効化」を押してください。

インストールが出来たので、実際に画像をアップロードしてみましょう。

「77KB」のファイルをアップロードしてみます。

アップロード後のサイズは「49.54KB」になりました。

少しですが圧縮されましたね。

「EWWW Image Optimizer」のプラグインを入れておけばこのように自動で圧縮してくれます。

なので、とりあえず入れておきましょう。

画像圧縮後の検証結果

画像の圧縮が終わったので、ページの表示速度がどれだけ改善したか確認しましょう。

画像圧縮前と同じように「PageSpeed Insights」でページの表示速度を確認します。

評価は「70」→「77」に上がりました。

「次世代フォーマットでの画像の配信(画像の表示)」を見てみると、圧縮した後は「1.5秒」となりました。

圧縮する前は「5.55秒」だったので、 「4秒」改善されましたね!

やはり、「png」を「jpg」に変換したのが大きかったようです。

最後に

今回は画像圧縮とその効果について、お話ししました。

  • 画像は「png」じゃなくて「jpg」使う
  • プラグインを使って自動圧縮する

がポイントでした。

確かに、画像圧縮でページ表示速度を改善できますが、こだわりすぎて時間をかけるのは、良くありません。

本質はブログの内容をちゃんと考えて、書くことの方が重要なので、ほどほどにしましょう。

最後に、今回の記事内容と真逆のことを言ってすみません・・・

以上です。

-ブログ

かつひろ

妻と娘が大好きな30代のシステムエンジニアです。家族と一緒に自由な暮らしを得るために、毎日ブログをコツコツ更新中。

プロフィール詳細