画像の圧縮方法をブログ初心者にわかりやすく紹介!表示速度を上げてSEO対策をしよう

ブログを書いているとき、画像をアップロードすることがよくあると思います。まさかそのまま投稿してませんか?まずいですよ!
画像を圧縮方法を知らないばっかりに、特にモバイルでの表示速度が遅くなってしまいSEO効果でマイナスになります。

せっかくいい記事を書いても表示速度が遅くてブラウザバックされてしまったらもったいないので、是非画像の圧縮方法を学んでSEO対策をしましょう。

こんな人におすすめ

  • 画像の圧縮方法を知りたい
  • 画像アップロード関連でSEO対策をしたい

サイト表示速度の測定方法

まずは自分のブログの表示速度がどれくらいなのかを測定しましょう。大きな理由が画像データが過多になっていることだと思いますが、一応見ておいてください。ブログ表示速度測定には以下の二つのツールをおすすめします。

Googleのモバイル表示速度測定ツール

Page Speed Inshigts

両方とも、Googleから出ている測定ツールです。色々理由が出てくると思いますが、今回は画像データが重くて表示速度が遅い場合の対策として、画像圧縮という方法があるのでそちらを詳しく説明していきます。

画像の圧縮方法

今回は画像圧縮に焦点を当ててお話を進めますが、その前に画像投稿がそもそもどういう方法がベストなのかを説明しておきます。

  • 画像のサイズをリサイズする
  • 画像データの容量を軽量化(画像圧縮)

サイズを適切なサイズにしてから、画像のデータ容量を軽量化する、という手順ですね。WordPressでしたら、使っているテーマなどで変わりますが、横700px未満×高さ400px未満でリサイズすると良いです。データ容量は70KB未満が良いみたいです。

自分のサイトの適切な画像サイズは、以下の記事で紹介しているので合わせてご覧ください。

画像をリサイズするためのツール

画像をリサイズするツールは今回二つ紹介します。どちらでも構いませんので使ってみましょう。リサイズしたい画像をドラッグ&ドロップでリサイズできます。

BULK Resize

このようなトップ画面のものです。画像をドラッグ&ドロップして操作します。先ほどお伝えした通り、横700px未満×高さ400px未満でリサイズしましょう。

画像リサイズツール

こちらも使えます。保存形式がJPG・PNGと選べますが、JPGで良いです。

画像を圧縮するツール

Optimizilla

ワニが特徴的なWebツール、インストールも不要です。特に考えずに、ページの下の部分にドラッグ&ドロップをしてダウンロードすればOK。

画像をもう一段階圧縮するツール

Tinypng

こちらは、Opimizillaで圧縮した後にさらに圧縮するために使うWebツールです。最大限圧縮するためにこちらでも画像圧縮をやっておきましょう。

これで圧縮までの手順が全て完了しました。画像圧縮をした後、データ容量が70KB以下になれば丁度いいです。そのままだと100KBを超える画像は意外とたくさんあるので、なるべく小さくして表示速度を上げましょう。

画像を圧縮せずにアップロードしてはいけない理由

冒頭でも説明しましたが、画像を圧縮しないとサイトの表示速度が遅くなります。読者の方の通信速度や通信環境にもよりますが、画像圧縮をしないで表示速度が遅くなると、10〜20秒表示するのにかかったりもします。

SEO対策ということを抜きにしても、ユーザビリティを考えれば10〜20秒待ってブログをみてくれる人はなかなかいないでしょう。

モバイル端末での閲覧が多い現在、モバイルの通信速度は無視できないものになっているので、画像の圧縮をしてしっかりSEO対策をしましょう。

  • 画像を圧縮せずにアップロードすると、データ容量が70KBを簡単に超えてしまうので表示速度が低下
  • 表示速度が遅いと、Googleクローラーからも評価が悪く、上位表示がしにくくなる(SEO対策ができていないと認識されてしまう)。

今回は画像の圧縮についてお話をしましたが、以下の記事も画像に関するSEO対策になるので、よければ合わせてご覧ください。

当ブログで使用中のWordPressテーマTHE THOR(ザ・トール)
4

WordPress有料テーマTHE THOR(ザ・トール)

・サイト表示速度抜群でSEO対策にもなる
・デザイン機能に優れ、カスタマイズ度◎
・Googleアドセンスなどのコード貼り付けが楽

ブログ始めたての頃の難しい操作を大幅短縮できるので、時短にもなっておすすめです。

以下 参考ブログ

https://blog.marswee.com/entry/photo-resize

https://kiniblog.com/image-compression/

https://www.infact1.co.jp/staff_blog/webmarketing/40598/

画像圧縮の方法 ブログ初心者にも簡単 SEO対策にもなる
最新情報をチェックしよう!