当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

ブログ運営

ブログに載せる画像サイズはどのくらいが適切?

アイキャッチ画像
みきてぃ東西線

カメラやスマホで撮った画像をそのままブログやサイトに載せると、データが重くなるため、ブログにアップする前に画像サイズは必ず小さくしておく必要があります。

さらに、スマホの普及により、「容量が小さく、かつ画質の高い画像」が重要になっていきます。

私の場合、画像サイズは縦横1050pxがオススメです。

プロフィール用アイコン
みきてぃ東西線

容量の軽いpng画像の場合は、1400pxにしても問題無いよ!

画像は最適な大きさにしよう!

自分のブログで記事コンテンツエリアの幅に合わせた画像を使っている方もいますが、

  • ブログの引っ越し
  • WordPressのテーマ変更
  • Retinaディスプレイ対応

などを考慮した場合、画像の大きさは縦横1050pxが無難です。

画像容量の軽いpngの場合は縦横1400pxにしても問題ありませんが、jpg画像の場合はサイズを大きくすると、それだけ容量も増えるため、縦横1050pxの方がオススメです。

画像が小さすぎると?

まず、180pxの画像と700pxの画像を1枚ずつ用意しました。

サンプル1:金魚の画像

  • 上が180pxの画像、下が700pxの画像
  • いずれも、MozJPEGの圧縮レベルを90に指定

サイズが180pxの画像

金魚の画像180px

サイズが700pxの画像

金魚の画像700px
プロフィール用アイコン
みきてぃ東西線

画像サイズが180pxだと、何の画像なのか分からないよね・・・。(^-^;

画像が大きすぎると?

次に、1250pxの画像と、740pxの画像を用意しました。

現在は新しいWordPressテーマに変更したため、700pxの画像が1200pxの画像より小さく見えてしまうことがあります。予めご了承ください現在のテーマのカラムサイズに応じて画像のサイズも変更しています。

サンプル2:ミルクティーの画像

  • 上が1250pxの画像、下が740pxの画像
  • いずれも、MozJPEGの圧縮レベルを85に指定

サイズが1250pxの画像

ミルクティーの画像1250px

サイズが740pxの画像

ミルクティーの画像740px

一見、同じサイズに見えると思いますが、実は多くのブログサービスの場合、大きいサイズの画像だと自動的にサイズが調整されます。

つまり、どんなに大きな画像を貼っても、自動的にリサイズされてしまうのです。

また、画像が大きすぎるとその容量も大きくなるため、完全に表示されるまで時間がかかってしまいます。

画像データの比較(参考)

  • 1250pxの画像のデータ:100KB
  • 740pxの画像のデータ:41KB
プロフィール用アイコン
みきてぃ東西線

同じ画質でも740pxの方だと、データが軽いんだね。

なぜ画像を最適な大きさにするのか?

画像を最適な大きさにする理由は、以下の2つです。

  • 画像を見やすくする
  • 画像データを軽くする

画像を見やすくする

画像サイズが小さい、または画質が悪いと、ユーザーにとっては分かりにくく感じます。

ですから、画像は見やすく、かつ高画質のきれいな画像にするように心がけましょう。

画像データを軽くする

ブログの記事内に画像が増えると、表示速度が遅くなります!

表示速度が遅くなるとサイトの離脱率が上がってしまうので、画像サイズを小さくしてデータを軽くしておきましょう。

縦長やグラフ・図形のサイズは?

以下のような画像の場合は、あえて大きい画像を用意し、画像をクリックした時に拡大画像を表示した方が良いです。

縦長で撮った画像縦長で表示されるので、記事が読みにくくなりやすい
グラフや図形など、詳細を含む画像サイズが小さいと見づらくなる
プロフィール用アイコン
みきてぃ東西線

WordPressの場合、プラグイン「Easy FancyBox」で簡単に導入できるよ。

アイキャッチの画像サイズは統一する

アイキャッチに表示される画像のサイズが異なると、関連記事やブログカードに表示されるサムネイルがバラバラになってしまいます。

プロフィール用アイコン
みきてぃ東西線

アイキャッチの画像だけは、必ず画像サイズを統一するようにしよう!

スマホサイト用の画像は無くてもOK

WordPressなどの多くのブログサービスでは、パソコンやスマホの画面に合わせて自動的にサイズが調整されます。

そのため、パソコン用とスマホ用の画像をそれぞれ用意する必要はありません。

【WordPress】使わない画像サイズを生成したくない場合は?

Retinaディスプレイに対応させたい場合

ただし、MacやiPhoneなどで使われているRetinaディスプレイにも対応させたい場合、予め2倍サイズの画像を用意しなければならないため、通常よりサイズが重くなってしまいます。

WordPressの場合は、

  • 画像圧縮サイトで予め画像の容量を減らす
  • ブログの記事にて記事幅と同じサイズ(例:記事幅が700pxの場合、縦横700pxにする)に縮小した画像を貼り付ける
  • 「Simple Image Sizes」プラグインでサムネイルの縮小画像のサイズを2倍に設定する
  • 画像の遅延読み込みをする

以上の手順を行えば、Retinaディスプレイでもサクサクと動くようになります。

Retinaディスプレイでサイト/ブログの画像がぼやける!?その対策を教えます

まとめ

  • 画像は、縦横1050pxが原則。ただし、容量の軽いpng画像は1400pxでも大丈夫
  • 基本的に見やすく、データが軽い画像にする
  • サイズが小さすぎる(特に200px以下)と、画像が見づらい
  • サイズが大きすぎる(特に1401px以上)と、画像の容量が大きくなってしまう
  • アイキャッチの画像サイズは統一する
  • スマホサイト用の画像は無くてもOK
  • 状況に応じて、あえて大きい画像を用意し、クリックで拡大画像を表示するのもOK
  • Retinaディスプレイにも対応したい場合は、それらも快適に動作できるように工夫が必要

画像はブログの表示速度に最も関係しやすくなりますので、画像サイズを意識しながらブログを更新していきましょう。

今回の記事が参考になれば幸いです。m(_ _)m

この記事を書いた人

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました