KsMemo

メインブログからブログ運営に関する記事のみを集めてきました

ブログに掲載する画像の横幅と容量、私が決めたマイルール

f:id:kminebg1110:20170605221922j:plain

ブログを始めたばかりの頃の記事内の画像を参照してみると、その画像の容量があまりにも大きいことに唖然とすることが多々あります。ブログを始めて 2年近く経過した現在でも、悩ましいのがブログに掲載する画像のサイズと容量。

そのような状況のもと、WordPressと「はてなブログ」で多くの記事を編集し、また他サイトを参照するなかで、最適と思われる画像のサイズと容量について、ご参考までに個人的なコメントを掲載します。

ブログに掲載する最適な画像サイズ

ブログを始めた当初は、記事内に大きな画像を掲載するのは抵抗があり、アイキャッチ画像にしても、横幅400px程度の小さな画像ばかり掲載していた私。

一方、本文中の画像は、ろくに圧縮することなく、1MB超の画像を平然と掲載していたことも多かったのですが、記事を参照していただいた方にとっては重すぎて、記事を読む前に離脱していたかと思われます。

 

さて、本題のブログに掲載する最適な画像サイズですが、 とあるサイトにて以下のコメントがあったため、半年ほど前から大きな画像を載せる傾向にあります。

 

  • 読者の方が、興味がある画像を拡大するアクションを取る必要があるのなら、例え1クリックでも読者の利便性を考慮し、最初から大きな画像を載せたほうがよい。
  • 文章のみだと、読者の目に飛び込んでこないうえに、飽きてしまう。であれば、大きな画像でインパクトを。

 

また、他サイトの以下の状況なども、大きな画像を掲載するようになったきっかけです。

 

  • 特にWordPressで多くのアクセス(月間30万PV超)を集めているサイトでは、皆さん かなり大きめの画像であり、掲載する写真も綺麗で凝ったものが多い。
  • 私がアイキャッチ画像などを頻繁にダウンロードしているフリー画像サイトでは、同一画像でもサイズが複数あるなか、最小画像の横幅は640PXと固定されている。640PXとしている理由は未確認ですが、需要があるのが640PXからだと推測しています。

 

以上により、私の場合には、画像は大きめがよい、ダウンロードサイトの最小画像の横幅が640PXとの単純な理由から、掲載する画像サイズは以下

 

ベースとなる横幅は640px。そこから画像の容量に応じて圧縮し、アイキャッチ画像の最小サイズは横幅580px

 

580pxにこだわりはないのですが、580px未満ではインパクトにかけるため、このサイズを最小としています。ただし、アイキャッチ画像以外で、例えば、スマホの使用方法の説明などのテキスト入りであるものの、画像自体が小さい場合には、テキストが判読できる範囲内でのサイズとしています。

 

画像の容量圧縮

さて、次に画像の容量ですが、いくら画像が大きくても、容量が大きく、表示に時間がかかるようですと、画像が表示される前に読者の方は離脱することにつながります。特に、表示の遅い「はてなブログ」ではなおさらのこと。

このため、私は容量的には重くとも30kb決めています。この30kbまでとした理由は客観的なものではないのですが、以下によるものてす。

 

  • とある著名なブログにて、20kb台で重いとのコメントあり。
  • かつて、スマホサイトの表示スピードアップに取り組んでいた際に、30kb程度体感的に我慢できる範囲であったこと。ただし、私が我慢できる範囲内であることは、読者の方には我慢てきないに繋がると思われ、20kb内が理想です。

 

上記のとおり30kbまでとしていることと、圧縮後の画像の劣化を考慮し、画像サイトからダウンロードする原画像の容量は80kb未満を目安にしています。

 

▼ちたみに、画像サイズの変更、圧縮は以下で紹介のバナー工房をメイン使用しています。

まとめ

いかがでしょうか。記事でのインパクト、読者の方の利便性を考慮する必要がある、ブログに掲載する画像のサイズと容量。私の場合、ブログ掲載用の画像サイズ、容量のマイルールは以下にしています。他サイトを参照すると640px以上バソコンサイトの横幅限度までとしているサイトも多くあります。ご参考まで。

 

  • 横幅は最大640px
  • 容量は最大30kb

 

※参考までに、冒頭の画像は横幅640px、容量23kb(元ファイルから30%の圧縮率)です。

 

 ▼画像のダウンロード元はこちらのPixabay。私のアイキャッチ画像は、ほとんどがこのPixabayから探してきたもの。