BLOG

ブログ画像の容量をリサイズ・圧縮する方法をわかりやすく解説【無料でサイト高速化】

こんにちは、やすです。(yasublog_1995

悩み

ブログに使う画像をリサイズ・圧縮して軽くしたい!
ブログを軽くしてサイトスピードを上げたい!

こんな疑問に答えます。

画像サイズが大きいとブログの表示スピードや読み込みが遅くなり、SEOにとってマイナスとなます。

また、読者にとって表示速度が遅いと負担となります。

ブログの画像容量をリサイズ・圧縮することでブロガーにとっても読者にとってもハッピーな結果になる。

ブログにとって最適な画像容量・サイズの紹介と具体的な画像のリサイズ・圧縮方法を詳しく解説していきます。

ブログ画像の最適な容量・サイズとは?

ブログ画像の最適な容量・サイズの目安は下記です。

  • 横幅:1000px以下
  • 容量:100〜200kb以下 

あくまでも目安なので基準として参考にしてみてください。

最適な容量・サイズを知ろう

ブログのごとに最適なサイズは異なります。

例えば、当ブログ(WordPressテーマ:JIN)では、横幅699pxです。青く表示されている部分の横幅にあたります。

それぞれのブログに適したサイズ=横幅を理解しましょう。

画像サイズがオーバーしてしまっても自動で最適な幅に調整されるので問題はありませんが見切れたりすることはあります。

サイトスピードが遅いとSEO評価でマイナスとなります。

ページのパフォーマンスが重要な理由
ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。具体的には:
ページの読み込み時間が1秒から3秒に増加すると、直帰率は32%増加します。
ページの読み込み時間が1秒から6秒に増加すると、直帰率は106%増加する。
ケーススタディをご覧ください。

引用元:ウェブに関する主な指標レポート

ページの読み込み時間が遅いと読者にストレスを与え直帰率も大幅に上昇してしまう。

筆者

ページの読み込みが遅いサイトがあるとブラウザバックすることがよくあります。機会損失を防ぐためにもきちんと見直しておきたい!

サイトスピード測定サイトはこちら

ブログ画像に適したサイズの確認方法

ブログ画像の最適サイズ測定方法を紹介します。

Google Chromeを使ったやり方なので、お使いでない人はダウンロードしてみましょう。

  1. Google Chromeを起動する
  2. 計測したいブログにアクセスする
  3. 画面上で右クリック→「検証」をクリックする
  4. カーソルマークをクリックする
  5. ブログ本文部分で青く表示されたらクリックする
  6. ツール中央付近「computed」をクリックする
  7. 青い部分の数字を確認する

計測したいブログの画面上で右クリック→「検証」をクリックします。

次に、カーソルマークをクリックする。

ブログ本文部分で青く表示されたらクリックします。

ツール中央付近「computed」をクリックする。

青い枠で囲まれた部分の数字を確認しましょう。

当ブログ(WordPressテーマ:JIN)の場合は「699.125×368.031」です。

この数字は記事の「横幅×縦幅」にあたります。

この方法でブログ毎のサイズを確認することができます。

ブログ画像のリサイズ・圧縮する方法

  • リサイズ:BULK Resize Photos
  • 圧縮:TinyPNG
  • プラグイン:EWWW Image Optimizer

1つずつ解説していきます。

画像リサイズ:BULK Resize Photos

無料サイトの「BULK Resize Photos」を使っていきます。

はじめに、BULK Resize Photosにアクセスします。

「画像を選択します」をクリックするか、ドラッグ&ドロップで画像を選びます。

幅を1200px(画像1200個)に選択して「開始」をクリックします。

筆者

アイキャッチ画像を横幅1200pxにしているので、全ての画像の横幅を統一しています!

他にも、「パーセンテージ」、「画像の寸法」などを選ぶことができます。

「完了しました」と表示されたらリサイズの完了です。

画像がダウンロードされファイルサイズが軽くなっています。

画像圧縮サイト:TinyPNG

ほとんど画質を落とさずに画像を無料で圧縮することができます。

TinyPNGへアクセスします

ドラッグ&ドロップで画像を選択すると自動で圧縮してくれます。

このように一括で画像を圧縮することもできます。

画像圧縮プラグイン:EWWW Image Optimizer

プラグイン「EWWW Image Optimizer」を使うことで、画像を悪化させることなく自動で画像を圧縮してくれます。

すでに、アップロードしている画像も一括圧縮することができます。

WordPress管理画面の「プラグイン」→「新規追加」をクリックします。

「EWWW Image Optimizer」を検索。「今すぐインストール」をクリックして「有効化」します。

EWWW Image Optimizerを設定していきます。

「メタデータを削除」にチェックを入れ「変更を保存」をクリックします。

画像のメタデータを削除してくれるので画像ファイルのサイズが小さくなります。

すでにアップロードした画像を一括圧縮したいときは、

WordPress管理画面の「メディア」→「一括最適化」をクリックします。

「最適化されていない画像をスキャンする」をクリックします。

表示が変わり一括で画像圧縮をしてくれます。

おすすめフリー画像サイト

無料・有料含めおすすめのフリー画像サイトは下記です。

無料サイト

  • Unsplash
  • ぱくたそ
  • Pixabay
  • GIRLY DROP
  • O-DAN

有料サイト

  • Shutterstock
  • iStock
  • Adobe Stock
  • Pixta

無料サイトを使っていると、どうしても他の人と被ってしまうことがあります。

有料サイトを使うことで独自性やブログの世界観を出すことができるので、お金に余裕がある人は使うことを検討してみてください。

おすすめのフリー画像サイトについては「ブログで使えるおすすめフリー素材・画像サイト7選」で紹介しています。

まとめ

今回は、ブログの画像容量をリサイズ・圧縮する方法を解説しました。

圧縮できるサイトやツールがたくさんあるのでこれが正解というわけではありませんが参考にしてもらえれば嬉しいです。

ブログを始めてばかりの頃は、とりあえず記事を書くことに意識がいって画像を軽量化することなんて全くしていませんでした。

慣れてきたら画像サイズの最適化にも取り組んでいきましょう。