BLOG

ブログ画像に最適な容量・サイズは?【圧縮・リサイズする方法を解説】

ブログ画像に最適なサイズ・容量

疑問

ブログに使う画像の最適な容量・サイズを知りたい

こんな疑問に答えます。

画像サイズが大きいと読み込みが遅くなり、ブログの表示速度が遅くなります。

その結果、SEO的にもよくないし、読者にとっても負担になります。

本記事の内容

  • ブログ画像に最適な容量・サイズとは?
  • ブログ画像のリサイズ・圧縮する方法

本記事を読めばブログ画像に最適な容量・サイズを理解でき、画像を圧縮・リサイズする方法がわかります。

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

ブログ画像に最適なサイズ・容量の目安は以下のとおりです。

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

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

最適なサイズ・容量を把握しよう

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

ブログ画像のサイズ

上記画像で青く表示されている部分が横幅にあたります。

たとえば当ブログ(WordPressテーマ:JIN)の場合は、横幅699pxです。

画像サイズがオーバーしてしまっても自動でMAX幅に調整されるので問題はありませんが、見切れる可能性があります。

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

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

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

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

筆者

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

サイトスピードを測定する(PageSpeed Insights)

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

Webサイトに適した画像サイズを確認する方法を解説します。

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

Google Chromeを使用するため、お使いでない方はダウンロードしてください。

Google Chromeをダウンロードする

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

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

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

ツール中央付近「computed」をクリックしてください。

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

当ブログ(WordPressテーマ:JIN)の場合は「699.125×368.031」です。この数字は記事の「横幅×縦幅」にあたります。

当ブログでは「699px」と表示されたので、画像サイズ699px以上を使えば、記事の幅より小さく表示されることはありません。

上記の方法で、WordPressテーマ毎のサイズを確認することができます。

ブログ画像を圧縮する方法

ブログ画像の圧縮方法について解説していきます。

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

画像リサイズ:BULK Resize Photos

画像サイトなどでダウンロードする際に、1000px以下に抑えていれば飛ばしてもOKです。

スマホで撮影した写真などは画像サイズが大きいので、パソコンにデフォルトで入っているソフトなどでサイズ変更(リサイズ)できます。

Windowsなら「ペイント」、Macなら「プレビュー」で画像サイズの変更ができます。

今回紹介するのは、無料で使える「BULK Resize Photos」というWebサービスです。

BULK Resize Photosにアクセスする

BULK Resize Photosの使い方

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

BULK Resize Photosの使い方

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

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

BULK Resize Photosの使い方

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

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

画像圧縮サイト:TinyPNG

TinyPNGの使い方

ほとんど画質を落とさずに、画像を圧縮してくれる無料のWebサービスです。

TinyPNGへアクセスする

TinyPNGの使い方

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

TinyPNGの使い方

このように一括で画像を圧縮することもでき、JPGPNGの両方に対応しています。

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

EWWW Image Optimizer

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

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

EWWW Image Optimizerの設定

WordPress管理画面から「設定 → EWWW Image Optimizer」をクリックします。

「画像のリサイズ」で「幅の上限・最大高さ」を設定できます。

すでにアップロードした画像を一括圧縮したいときは、
WordPress管理画面の「メディア→一括最適化」をクリックします

EWWW Image Optimizerの設定

最適化されていない画像をスキャンする」をクリックすると、画像圧縮が始まります。

EWWW Image Optimizerについては下記の記事で詳しく解説しています。
【画像圧縮プラグイン】EWWW Image Optimizerの設定方法・使い方

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

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

無料サイト

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

有料サイト

  • Shutterstock
  • iStock
  • Adobe Stock
  • Pixta

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

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

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

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

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


ブログ画像に最適なサイズ・容量(目安)
  • サイズ:1000px以下
  • 容量:100〜200kb以下 

ブログ画像の圧縮は最低限やっていればOKです。それよりも記事を書くことが大切です。

ブログ初心者の方は、キーワード選定だけしっかり行って記事を1本ずつ丁寧に書いていきましょう。

おわり