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

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


ブログで画像を挿入する時に最適な画像サイズっていくつなんだろう?


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

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

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

なぜなら、僕もまったく分かっていなくて、ブログを始めて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初心者なんだけど、有料テーマにした方がいいの?有料テーマにするとしたら、いつがいい?どうやって有料テーマを選んだらいいか分...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次