アスペクト比と画像サイズの微妙な関係?

author photo

Byinfobloger

アスペクト比と画像サイズ

ブログに投稿する時に画像サイズで迷った事はありませんか?

基本的には「16:9」か「4:3」が一番見やすいと言われています。

このテンプレートの場合はメインの幅が約1000pxあります。

綺麗に表示させるためには画像幅が1000px、アスペクト比に照らし合わせると1000px×約560pxが一番見やすいサイズになると思います。

しかし、ここで難問が。
それがRetinaディスプレイへの対応です。

MacのRetinaディスプレイで綺麗に画像を見せるためには、横幅1000pxの2倍2000px以上必要になります。

今回のテーマは、このテンプレートの適正な画像サイズについて紹介します。

スポンサーリンク

アイキャッチ画像の適正な大きさを教えて!

画像テキスト回り込み

Retinaディスプレイに対応させようと思ったらアイキャッチ画像は横幅は1500~2000pxがオススメです。

WordpressやFC2ブログの場合は記事毎にヘッダー画像を変えることはできません。

アイキャッチ画像で読者に読みたいと思わせなければいけないのです。

そのためには綺麗な画像をただ貼るだけでは不十分です。

必ずキャッチコピーを入れるようにしましょう。

表示されている画像は「1600px×900px」に指定していますが、このテンプレートが969pxからワンカラムになりメイン幅が800pxになるからです。

画像にテキストを回り込む方法について

画像テキスト回り込み

基本的な記事の構成は、見出しがあって画像があって本文となります。

ただデスクトップパソコンで見た場合、見出しの下に1000pxの画像が表示されるとあまりにも大きすぎるかもしれません。

そんな時は画像にテキストを回り込ませる方法があります。

先程の画像はアスペクト比が「16:9」ですが、ここで表示されている画像は「4:3」になっています。

左に画像を配置するか、それとも右に配置するかは自由です。

左と右、交互に表示してもいいかもしれません。

あるいは画像にテキストを回り込ませないで、そのままのサイズで表示させても構いません。

画像の回り込みをやめて元サイズで表示する

画像テキスト回り込み

画像にテキストを回り込ませないで、元のサイズで表示してみました。

画像サイズは「1600px×900px」ですが、そのまま画像を貼ってもメインカラムに収まるように設定しています。

またアイキャッチ画像以外なら横幅が1000pxであれば縦幅はあまり気にしなくても大丈夫です。

ただメインカラムのサイズより小さいサイズの画像は、そのままのサイズで表示されます。

拡大される事はありません。

大きな画像を貼っても表示速度に影響しない?

画像サイズの大きさは表示速度に影響します。

1つの記事に画像が1枚しかないのなら、それほど気にする必要は無いかもしれません。

しかし多くの場合は複数の画像やイラストを記事に貼り付けることになると思います。

小さな画像でいいんじゃない?

いえいえ、何度も言いましたが読者は記事を積極的に読みません。

ヘッダーやアイキャッチ画像のコピー、そして見出しと画像が「読まない読者を読ませる」唯一の方法です。

画像をサイズダウンする方法はいくらでもありますので、労を惜しまずに大きな画像を使うようにしましょう。

まとめ

このブログはFC2を如何にして資産化するかがテーマになっています。

少し普通のブログとは記事の書き方が違っていますので、基本的なの構成についてまとめてみました。

記事の基本構成
  • ヘッダー画像
  • アイキャッチ画像
  • 見出しと画像
  • 小見出しと画像
  • 見出しと画像
  • 小見出しと画像
  • まとめ

画像のサイズダウンの方法などについては、メルマガで紹介していますのでそちらを参考にしてください。

今回は画像のサイズと配置方法についてでした。

関連記事
Share

Comments 0

Leave a reply