【３分簡単】WordPressブログで極限まで画像圧縮する方法【表示速度に悩んでいる方へ】

こんな疑問を解決します。

WordPressブログをやっていると、画像の容量が重いことに悩むときありますよね・・。

画像が重いとページの表示速度の遅延につながり、SEOにも悪影響を及ぼすことは周知の事実です。でもどうやって画像圧縮をすればよいか分からない・・

そんな悩みを抱えているブロガーの方は多いのではないでしょうか。

でも大丈夫！本記事では初心者の方でも３分でカンタンに画像圧縮できる方法を紹介しています。

画像圧縮をすると、SEO対策にもなるので、やらない手はないですね( ｀ー´)ノ

本記事をさいごまで読んで、画像圧縮についてマスターしちゃいましょう！

それでは解説していきます。

なぜブログ画像の圧縮が重要なのか？

そもそも、なぜ画像圧縮が重要なのか。答えは、Google先生が言っているからですね。Google社が掲げる社訓『Googleが掲げる10の事実』はご存知でしょうか？

【検索順位の上げ方】10個のGoogle社訓がほのめかすSEO対策の本質とは？の記事で詳しく解説していますが、この社訓でGoogleが評価するWebページ条件のヒントを読み取ることができます。つまり、評価対象となるSEO指標がわかるわけです。

３つ目の『遅いより速い方がいい』とは、まさに『ページの表示速度』を指すと推測されます。Googleには『ユーザーの貴重な時間を奪うサイトはナンセンス』という考えがあるんですよね。

つまり、表示速度の遅延の原因となる「大容量の画像」をブログに貼ることはSEOに悪影響を及ぼすという訳です。

画像の圧縮は、SEO対策の必須項目なのです。ではブログに最適な画像の条件はどのようなものなのか見ていきましょう。

ブログに最適な画像条件とは？

まず最初に、ブログに最適な画像サイズ・容量・画像種類の条件を見てみましょう。

順番に解説しますね。

その①：画像サイズの目安は横幅1000pxくらい

画像をダウンロードするときにチェックすべきポイントは、画像の横幅です。

横幅はだいたい1000pxくらいあればブログに使えます。

画像サイズはブログ記事の横幅に自動調整されるるので、自らブログ記事の横幅サイズを測る必要はありません。Wordpressテーマによって若干サイズに差はありますが、一般的にブログの横幅サイズは600px~900pxくらいに設定されています。

たとえば、当ブログの他の記事を例に見てみます。

記事ページをひらいらた、右クリック⇒検証をクリック。

検証機能をつかえば、そのページのHTML,CSSをチェックすることができます。

アイキャッチ画像の横幅サイズはwidthで確認。780pxになっているので、600~900pxの中間くらいですね。

ダウンロードした画像はだいたいこれくらいの横幅サイズに自動調整されるの覚えておきましょう。

逆に、600pxよりも小さい画像を使うと横幅いっぱいに表示されず見栄えが悪くなるので注意が必要です。最低600pxくらいの横幅があることは事前に確認しておいた方がよさそうです。

その②：容量は圧縮して200KB以下に

画像の容量は200KB以下に圧縮しましょう。

画像容量を小さくすることは、ページ表示速度の向上につながります。

スマホで撮る写真の容量はだいたい１～２MBくらい。１M＝1,000KBなので、200KBはスマホ画像１枚の５分の一の軽さというイメージです。

画像圧縮をしないでブログに貼りまくると、かなり表示速度にダメージが・・。圧縮は大事です。

その③：画像の種類はJPEGでOK

写真や画像の保存形式は大きく分けて、JPEG（ジェイペグ）とPNG（ピング）の２種類あります。

特徴をまとめると、こんな感じ。

	適した使用場面	容量	ブログで実践する場合
JPEG	写真や画像を掲載するとき	軽い	テキストなしの画像ならJPEG
PNG	イラスト・ロゴ・図を掲載するとき	重い	テキストありの画像ならPNG

ブログで画像を貼る際に覚えておくべきことは、テキスト有無です。テキスト入りの画像を貼るときはPNG形式、テキストなしの普通の画像を貼るときはJPEG形式のものを使えばOKですよ。

基本的な流れは、「画像をダウンロード」⇒「ブログにそのまま使用」だと思うので、PJEG形式で保存すればいいですよ。もしCanvaなどでテキスト入りのオリジナル画像を作りたいのであれば、そのときは形式で保存すればOKかと( ｀ー´)ノ

画像圧縮方法の３ステップ【当ブログも実践済み】

ここから当サイトでも実践済みの画像圧縮方法を紹介します。以下３ステップで画像を圧縮しまくりましょう！

ステップ①：TinyPNGで圧縮

まずはTinyPNGという無料の画像圧縮ソフトを活用します。

>>TinyPNG無料圧縮ソフトはこちら

圧縮したい画像をドラッグアンドドロップします。

圧縮が完了したらdownloadをクリックし画像を保存します。平均-80%くらいの圧縮率です。すごい・・。

【ブログ画像の圧縮方法】
ブログに画像を貼る前に、TinyPNGで画像圧縮するといいですよ！圧縮率は80%前後。かなり軽くなるので、表示速度の改善にも役立つ。オススメです🙃https://t.co/Nk8oEP3AhL#ブログ書け #ブログ仲間と繋がりたい #ブログ仲間募集 #今日の積み上げ #アフィリエイト #画像圧縮 pic.twitter.com/NXMBjJrsmA

— みっつー＠Webﾏｰｹﾀｰ×ブログ×Web制作 (@hiro_32i) July 5, 2021

TinyPNG無料版は、一回で圧縮できる画像枚数が20枚までになっているので、20枚より多くある場合は複数回にわけてチャレンジしましょう。

“File is too large”と赤色で表示されている画像は、初期サイズが大きすて無料版での圧縮ができないことを意味します。その画像は次で紹介するiLoveIMGで圧縮しなおせばOK。

次はもっと画像を軽くするためにiLoveIMGを使います。

ステップ②：iLoveIMGでもっと圧縮

iLoveIMGとは画像圧縮だけでなく、サイズ変更や画像の切り抜き、透かし画像もつくれる加工編集総合ツールです。

こちらも無料で画像圧縮ができるので、TinyPNGで圧縮した画像をさらに圧縮することができます。

>>iLoveIMG無料圧縮ソフトはこちら

左上の『画像の圧縮』をクリック。

圧縮したい画像を選択します。クリックして画像を選択できますし、TinyPNGみたいにドラッグアンドドロップもできます。

『画像の圧縮』をクリックして圧縮スタート！

こちらもだいたい-80%くらいまで圧縮されますよ。さいごは『圧縮された画像をダウンロード』をおして保存しましょう。

『EWWW image optimizer』のプラグインで更に圧縮

ラストはWordpressプラグイン『EWWW image optimizer』です。

このプラグインは画像を自動圧縮してくれるので非常に便利。まだインストールしていない人は『WP管理画面』⇒『プラグイン』⇒『新規追加』からインストールしましょう。

WPにアップロード済みの画像もすべて一括最適化してくれます！

画像をWordpressにアップロードするたびに上記３ステップを踏むのは正直めんどくさいですが、画像の重さはページの表示速度にダイレクトに影響するので、しっかりと作業をこなすことをオススメします( ｀ー´)ノ

【補足】サイトの表示速度を計測したい場合

画像を圧縮した後はサイトの表示速度を確認してみるのもいいかもです。表示速度は『PageSpeed Insights』という無料ツールで確認できます。

表示速度のスコアが緑色の「90-100」になっているのが理想です。

ちなみに、このPageSpeed Insightsは「実速度」を計測しているわけではなく、あくまでも実際のスピードデータに近い計測結果をスコア化しているだけなんです。初心者はPageSpeed Insightsを使うので全く問題ないですが、正確なサイト表示速度を調べたければ『GTmetrix』を使ってみるといいですよ！（英語で難しいですが・・）

ブログ表示速度の計測ツール"PageSpeed Insights"には一つ問題がある。それは、実際の表示速度を計測できないこと。
サイトの正確な表示速度を調べたければ、”GTmetrix”がオススメ👍「実際の」表示速度を計測できるので、本格的な対策が可能。使うしかない！#ブログ初心者 https://t.co/ztuIAduHQm pic.twitter.com/dJ0qc0KQgF

— みっつー＠Webﾏｰｹﾀｰ×ブログ×Web制作 (@hiro_32i) July 22, 2021

こんな感じでテクニカルな計測結果を出してくれます。僕はまだ慣れておらず使いこなせていないですが、興味がある人はトライしてみてもいいかもです。

まとめ：ブログに最適化した画像圧縮を心がけよう！

今回はブログに最適化となる画像圧縮方法を３ステップで紹介しました。さいごにまとめです。

初心者でもカンタンにできますね。ブログ記事を作る際のルーティンに今回の画像圧縮を組み込んでしまいましょう！

なお、ブログにオススメなフリー素材を探している方は下記記事が参考になります。５つ厳選してオススメサイトを紹介しています。

今回は以上です。