【初心者向け】ブログに最適な画像サイズと圧縮方法について解説

こんにちは、ひびのです。


本日のお悩み
  • ブログに最適な画像サイズが分からない
  • どうやって画像を編集するの?
  • そもそも何で画像のサイズを変えなきゃいけないの?


こういう疑問を解決する記事を書きました。

ブログで画像を挿入する時に、適切な大きさと容量にしてから挿入していますか?

これはとても重要なことなんですけど、意外とできていない人が多いんじゃないかと思うんです。

なぜなら、僕もまったく分かっていなくて、ブログを始めて1年後ぐらいに気付いたからです。

これまでやっていなかった人も、この機会に覚えていってください。

ひびの

それではいきましょう!


目次

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


  1. 大きさ→横幅1000PX
  2. 容量→200KB以下



結論から言うと、横幅を1000PXにしておけばまず間違いありません。

なぜなら、どんなブログでも横幅が1000PX以下だからです。

ブログの横幅より大きな画像は、自動で丁度良いサイズにリサイズされますが、あまりに大き過ぎると容量が大きくなって重くなってしまいます。

逆に小さ過ぎると、シンプルに見にくかったり、ブログの横幅と揃っていないので違和感を感じたりします。


横幅を1000PXにリサイズした画像は、普通のベクター画像なら容量が200KB以下になるので、容量的にも丁度良いと思います。



1000PXでもちょっと大きめなので、もっと容量を削りたい人は100PXづつ小さくしてみて、サイトの横幅と丁度合う大きさを探してみてください。

画像の拡張子については、JPGで問題ありません。

ブログの画像サイズを最適にしなければいけない理由


  • 画像の容量が大き過ぎると、サイトの表示スピードが遅くなるから

画像の容量が大き過ぎると、サイトの表示スピードが遅くなるから

画像のサイズが大きくなるほど、もちろん容量も大きくなります。

画像の容量が大き過ぎると、その分読み込みに時間がかかって、サイトの表示スピードが落ちます。

これがSEOに対してかなり悪影響を及ぼす訳です。

ブログをやる上でかなり初歩的なことなんですけど、僕がこのことに気付いたのは、なんとブログを始めて1年後です。

こんなツイートが残っていました。




ですので、知らなかった人も安心してください(笑)




例えばこの画像のように、大きさが4500×3000PXで、容量が8.2MBというとんでもない大きさの画像を、何も気にせずバンバン使ってました。

これは絶対NGです。
画像を適切な大きさにリサイズし、さらに圧縮して容量を小さくしなければなりません。

容量の目安としては、200KB以下です。

画像をリサイズして圧縮する方法も、次の章で合わせて解説していきます。

画像をリサイズして圧縮する方法

Macの「プレビュー」を使ってリサイズする方法

Macを使っている人は、「プレビュー」を使ってリサイズする方法が1番簡単だと思います。

  1. 画像を開いて右上のツールボタンを押す
  2. サイズ調整を選択し、幅を1000PXに変更すれば完了です



画像編集ソフトを使ってリサイズする方法

画像編集ソフトを使えば、リサイズだけでなく、テキストや矢印なども入力できるので、1つは持っていた方がいいかなと思います。

簡単な編集なら無料の画像編集ソフトでも十分です。

僕が使っているのは、「PhotoScapeX」という無料の画像編集ソフトですね。


  1. 画像をドロップする
  2. サイズ変更をクリック
  3. 幅を1000PXに変更して、適用をクリックすれば完了です




TinyPNGを使って、リサイズした画像を圧縮する方法

TinyPNGというサイトを使えば、めちゃくちゃ簡単に画像を圧縮することができます。

枠線のところに画像をドロップするだけです。
かなり大幅に画像を圧縮して軽くしてくれるので、とても重宝しています。



まとめ:画像を使って魅力的な記事にしよう



今回は、ブログに最適な画像サイズと圧縮方法について解説しました。

文章だけでは説明しにくい時は、画像を使って説明してあげると、読者にとっても分かりやすいと思います。

説明以外でも、h2見出しの下に画像を入れてあげると、記事全体のクオリティが上がる気がしますね。


h2見出し下の画像は、正直SEO的にプラスかどうかは僕は分からないのですが、トップブロガーはみんな使っているので、シンプルに真似してます。見映え的にも全然違いますし、言葉で説明するのは難しいんですけど、なんか”いい感じ”になるんですよね。(笑)



間違いないんで、使ってみてください。

最後におすすめの画像サイトを紹介して終わりにします。

  • freepik 有料だけどそこまで高くない。高品質のベクター画像があります。僕が普段使っているサイトです。
  • storyset 無料のベクター画像がたくさんあります。
  • Unsplash 無料で高品質な写真がたくさんあります。


というわけで以上です!


あわせて読みたい
WordPress初心者でも有料テーマにした方がいい理由を解説! こんにちは、ひびのです。 WordPress初心者なんだけど、有料テーマにした方がいいの?有料テーマにするとしたら、いつがいい?どうやって有料テーマを選んだらいいか分...

当ブログ使用のWordPressテーマ

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次