How To

ブログに載せる画像のおすすめサイズと容量【GIMPで変更】

ブログにおすすめの画像サイズ

ブログに載せる画像のおすすめサイズ(大きさ・容量)について解説します。

また、画像サイズの変更に便利なフリーソフトとその使い方についても書きました。

 

こんな人のお役に立てる記事です。

小豆
スマホで撮影した写真をそのままブログに載せるのは良くないって聞く。
でも具体的には、何をしたらいいの?

ブログに載せる画像のおすすめサイズ【大きさと容量】

早速ですが、ブログに載せる画像のおすすめサイズは以下の通りです。

おすすめサイズの目安

  • 大きさ:幅 640px
  • 容量:~200KB
小豆
なるほど。
でもそれって何を根拠に言っているの?
WEB上の画像ダウンロードサイトを参考にするとわかりやすいよ。
ブログ用画像としては、このサイズがデフォルトになっているんだ。
大福

 

たとえば、ブログ用画像の無料ダウンロードサイトで人気の【写真AC】だとこんな感じ。

画像ダウンロードサイト

小豆
それ以外にも2つのサイズがあるようだけど‥。

ダウンロードできる画像サイズは3種類ありますが、多くの人が選ぶのは「幅 640px」の画像。

理由は明白で、ブログ幅以上の大きな画像を載せても意味がないからです。

 

実際に、「ブログ幅730px」のこのブログで試してみました。

幅 730pxの画像を載せた場合 幅 1000pxの画像を載せた場合
730pxの画像をブログの挿入 1000pxの画像をブログに挿入
容量:157KB 容量:347KB

画像はクリックで拡大できます

実際の画像サイズは異なるにもかかわらず、ブログ上での見え方はほぼ同じです。

小豆
ホントだ。
ってことは、幅1000pxの画像は容量が大きい分無駄ってこと?
その通り。
画像の容量が大きくなればなるほど、ブログの読み込み速度が遅くなってしまうからね。
大福

大きな画像を載せることでブログの読み込み速度が遅くなると、Googleからの評価が下がり、結果的に検索順位が下がってしまう可能性があります。

 

小豆
じゃ、ブログに載せる画像は軽ければ軽いほど良いってことなんだね。
実は、必ずしもそうだとは言えないんだ。
大福

 

画像サイズの理想は「軽くて見やすいこと」

まずは、こちらの2枚の画像を見比べてみてください。

幅:640pxの画像 幅:640pxの画像
幅640pxの画像1 幅640pxの画像2
容量:158KB 容量:41KB

画像はクリックで拡大できます

どちらの画像も大きさは同じ【幅 640px】。

大きさは全く同じにもかかわらず、右側の写真はボヤけてしまっています。(拡大するとより分かります)

これが、容量(ファイルサイズ)による画像の見え方の違いです。

 

というわけで、ブログに載せる画像は容量が軽いに越したことはないですが、軽すぎてもダメ。

これらを踏まえたのが、冒頭で紹介した【ブログに載せる画像のおすすめサイズ】だったというわけです。

おすすめサイズの目安

  • 大きさ:幅 640px
  • 容量:~200KB

画像のサイズ変更が簡単にできるGIMPの使い方

ブログに載せる画像サイズの変更には、GIMP(ギンプ)という無料の画像編集ソフトが便利です。

GIMPは、フリーソフトにもかかわらず本が出版されているほどの人気ソフトです。

GIMP

GIMPを使用する最大のメリットは、一度で「画像の大きさと容量の圧縮」が完結すること。

よくある「○○のソフトで画像サイズを変更→△△を使って画像を圧縮」というような2度手間がかかりません。

というわけで、早速スマホで撮影した写真を使用しながら操作方法を解説していきます。

 

画像のサイズ変更手順

  1. 撮影した画像をGIMPで開く
  2. サイズを変更する
  3. 保存時に画像の圧縮をする

 

step
1
撮影した画像をGIMPで開く

GIMPで画像を開く

GIMPを起動したら、サイズの変更を行いたい画像を開きます。

メモ

画像は、以下の2通りの方法で開くことができます。

  1. 画面内に直接画像をドロップ
  2. ファイル → 開く/インポートで画像を指定

 

step
2
サイズを変更する

オリジナル画像のサイズは【大きさ:4032×3024px 容量:6.85MB(7193KB)】、まずは大きさを変更していきます。

画像のサイズを変更

画像 → 画像の拡大・縮小 → 幅を640pxに → 拡大・縮小

高さは自動調整されるので、数値の入力は行いません。

ちなみにここでは幅を640pxに指定しましたが、自分のブログ幅に収まるサイズならどんなサイズでもOKです。

関連自分のブログの横幅を調べる方法【他のサイトの幅も簡単にわかる】

 

step
3
保存時に画像の圧縮をする

画像の保存

ファイル → Export As...

保存先の指定

  1. 保存する場所を指定
  2. ファイル名を変更
  3. エクスポートをクリック

画像を圧縮

  1. 画像ウィンドウでプレビューをクリック
  2. ファイルサイズを確認しながら品質を調整
  3. エクスポートをクリック

画像ウィンドウでプレビューをクリックすると、保存する画像の容量(ファイルサイズ)を変更することができるようになります。

僕の場合は、容量が150~200KBになるように品質を調整しています。

 

圧縮率による画像の見え方は以下の通りです。

50KB 100KB 150KB 200KB
50KBで保存 100KBで保存 150KBで保存 200KBで保存

画像はクリックで拡大できます

大福
これで画像サイズの変更は終わり!
操作を難しく感じるのは、最初だけだよ。

 

今回の作業で実際にサイズ変更を行った画像がこちらです。

リサイズ後の画像

 

  大きさ 容量
オリジナル画像 4032×3024px 6.85MB(7193KB)
サイズ変更後の画像 640×480px 173KB

EWWW Image Optimizerなら面倒な手間は一切なし

WordPressには、【EWWW Image Optimizer】という便利なプラグインがあります。

EWWW Image Optimizer

【EWWW Image Optimizer】を使えば、今回紹介したような作業の手間は一切なし。

WordPressに画像をアップロードする度に、毎回自動でサイズと容量の変更を行ってくれます。

小豆
んっ!?
じゃぁなんで、最初からこれを紹介しないんだ?

実は、これにはちょっとした理由があります。

 

以前までは、僕も画像のサイズ変更は【EWWW Image Optimizer】に任せっきりでした。

ですが、たま~にですが失敗することがあるんですよね。

テキストメインの画像なんかが、圧縮のし過ぎでボヤけてしまうことが何回かありました。

個人的には、どうしてもそれが気になって、その後は毎回手動で画像のサイズ変更をするようになりました。

 

とは言え、【EWWW Image Optimizer】はとても人気の優秀なプラグインです。

画像に含まれるExif(位置情報)などの削除も行ってくれますからね。

詳しい使い方を知りたい人は、EWWW Image Optimizer 使い方 🔎で検索してみて下さい。

 

スマホで撮影した写真に含まれるExif情報の削除方法は、以下の記事内で解説しています。

ブログに載せる写真は危険
スマホで撮った写真をそのままブログに載せるのは危険!対処法はこれ

続きを見る

 

まとめ:ブログには軽くて見やすい画像を載せよう

ブログに載せる画像は、「軽くて見やすい」が理想です。

どちらの条件が欠けてもダメ。

というわけで、ブログに載せる画像は以下のサイズを目安に調整してみて下さい。

おすすめサイズの目安

  • 大きさ:幅 640px
  • 容量:~200KB

 

記事内で紹介した人気の画像無料ダウンロードサイト

こちらの記事もよく読まれています

  • この記事を書いた人

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-How To

© 2021 大福日記