カメラやスマホで撮った画像をそのままブログやサイトに載せると、データが重くなるため、ブログにアップする前に画像サイズは必ず小さくしておく必要があります。
さらに、スマホの普及により、「容量が小さく、かつ画質の高い画像」が重要になっていきます。
私の場合、画像サイズは縦横1050pxがオススメです。
容量の軽いpng画像の場合は、1400pxにしても問題無いよ！
目次
画像は最適な大きさにしよう！
自分のブログで記事コンテンツエリアの幅に合わせた画像を使っている方もいますが、
- ブログの引っ越し
- WordPressのテーマ変更
- Retinaディスプレイ対応
などを考慮した場合、画像の大きさは縦横1050pxが無難です。
画像容量の軽いpngの場合は縦横1400pxにしても問題ありませんが、jpg画像の場合はサイズを大きくすると、それだけ容量も増えるため、縦横1050pxの方がオススメです。
画像が小さすぎると？
まず、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などの多くのブログサービスでは、パソコンやスマホの画面に合わせて自動的にサイズが調整されます。
そのため、パソコン用とスマホ用の画像をそれぞれ用意する必要はありません。
Retinaディスプレイに対応させたい場合
ただし、MacやiPhoneなどで使われているRetinaディスプレイにも対応させたい場合、予め2倍サイズの画像を用意しなければならないため、通常よりサイズが重くなってしまいます。
WordPressの場合は、
- 画像圧縮サイトで予め画像の容量を減らす
- ブログの記事にて記事幅と同じサイズ（例：記事幅が700pxの場合、縦横700pxにする）に縮小した画像を貼り付ける
- 「Simple Image Sizes」プラグインでサムネイルの縮小画像のサイズを2倍に設定する
- 画像の遅延読み込みをする
以上の手順を行えば、Retinaディスプレイでもサクサクと動くようになります。
まとめ
- 画像は、縦横1050pxが原則。ただし、容量の軽いpng画像は1400pxでも大丈夫
- 基本的に見やすく、データが軽い画像にする
- サイズが小さすぎる(特に200px以下)と、画像が見づらい
- サイズが大きすぎる(特に1401px以上)と、画像の容量が大きくなってしまう
- アイキャッチの画像サイズは統一する
- スマホサイト用の画像は無くてもOK
- 状況に応じて、あえて大きい画像を用意し、クリックで拡大画像を表示するのもOK
- Retinaディスプレイにも対応したい場合は、それらも快適に動作できるように工夫が必要
画像はブログの表示速度に最も関係しやすくなりますので、画像サイズを意識しながらブログを更新していきましょう。
今回の記事が参考になれば幸いです。m(_ _)m
