カメラやスマホで撮った画像をそのままブログやサイトに載せると、どうしてもデータが重くなってしまいます。
また、スマホの普及により、「容量が小さく、かつ画質の高い画像」が重要になっていきます。
私の場合、ブログの構成にもよりますが、画像サイズは最大でも1000pxがオススメです。
目次
画像は最適な大きさにしよう！
自分のブログで記事コンテンツエリアの幅に合わせた画像を使っている方もいますが、ブログの引っ越しや、WordPressのテーマ変更なども考慮すると、最大1000pxが無難でしょう。
画像が小さすぎると？
まず、180pxの画像と700pxの画像を1枚ずつ用意しました。
サンプル1：金魚の画像
- 上が180pxの画像、下が700pxの画像
- いずれも、MozJPEGの圧縮レベルを90に指定
画像サイズが180pxだと、何の画像なのか分からないよね・・・。(^-^;
画像が大きすぎると？
次に、1200pxの画像と、700pxの画像を用意しました。
サンプル2：ミルクティーの画像
- 上が1200pxの画像、下が700pxの画像
- いずれも、MozJPEGの圧縮レベルを90に指定
一見、同じサイズに見えると思いますが、実は多くのブログサービスの場合、大きいサイズの画像だと自動的にサイズが調整されてしまいます！！
つまり、どんなに大きくても自動的にリサイズされるので、注意しよう！
また、画像が大きすぎるとその容量も大きくなるため、完全に表示されるまで時間がかかってしまいます。
画像データの比較(参考)
- 1200pxの画像のデータ：162KB
- 700pxの画像のデータ：67KB
同じ画質でも700pxの方だと、データが軽いんだね
なぜ画像を最適な大きさにするのか？
画像を最適な大きさにする理由は、以下の2つです。
- 画像を見やすくする
- 画像データを軽くする
画像を見やすくする
画像サイズが小さい、または画質が悪いと、ユーザーにとっては分かりにくく感じます。
ですから、画像は見やすく、かつ高画質のきれいな画像にするように心がけましょう。
画像データを軽くする
ブログの記事内に画像が増えると、表示速度が遅くなります！
表示速度が遅くなるとサイトの離脱率が上がってしまうので、画像サイズを小さくしてデータを軽くしておきましょう。
縦長やグラフ・図形のサイズは？
ただし、以下のような場合は注意点があります。
縦長で撮った画像：縦長で表示されるので、記事が読みにくくなりやすい
グラフや図形など、詳細を含む画像：サイズが小さいと見づらくなる
上記の画像の場合、あえて大きい画像を用意し、画像をクリックした時に拡大画像を表示した方が良いです。
WordPressの場合、プラグイン「Easy FancyBox」で簡単に導入できるよ。
アイキャッチの画像サイズは統一する
アイキャッチに表示される画像のサイズが異なると、関連記事やブログカードに表示されるサムネイルがバラバラになりやすくなってしまいます。
アイキャッチの画像だけは、必ず画像サイズを統一するようにしよう！
スマホサイト用の画像は無くてもOK
WordPressなどの多くのブログサービスでは、パソコンやスマホの画面に合わせて自動的にサイズが調整されます。
そのため、パソコン用とスマホ用の画像はそれぞれ用意しなくても大丈夫です。
まとめ
- 画像は最大でも1000pxが無難
- 基本的に見やすく、データが軽い画像にする
- サイズが小さすぎる(特に200px以下)と、画像が見づらい
- サイズが大きすぎる(1001px以上)と、画像の容量が大きくなってしまう
- アイキャッチの画像サイズは統一する
- スマホサイト用の画像は無くてもOK
- 状況に応じて、あえて大きい画像を用意し、クリックで拡大画像を表示するのもOK
画像はブログの表示速度に最も関係しやすくなりますので、画像サイズを意識しながらブログを更新していきましょう。
今回の記事が参考になれば幸いです。m(_ _)m
