【簡単説明】ホームページやブログ|サイトで使用する画像サイズの例を公開

こんにちは。
私はWebサイトやブログを制作しはじめる初期のころにいくつか疑問に思うことがありました。

その中で、「画像のサイズはどのくらいの大きさを使用すればよいか」というのが地味に決められなかったのを覚えています。
実はほんの1~2年前までこれが決まらなかったですね。
理由は、パソコン環境の変化が激しかったからです。
ディスプレイやスマホの大きさ、レスポンシブなどの環境がそれを大きく悩ませました。

画像サイズ…悩む方はいるでしょうか。

今回は実際にWeb制作を主として活動する当事務所で使用する画像サイズがどのくらいの大きさなのかを公開します。

画像サイズを気にするか気にしないか

画像サイズを気にする人はすでに一歩先を進んでいると思います。

特にブログの場合、この画像サイズを悩む時点でわりと一歩前を歩いている方だと推測します。
というのも、ブログ初心者の方はスマホやデジカメの画像をサイズ縮小せず使用している人が多いからです。

つまりサイズを気にするということは、SEO対策に意識があったり、サイズ変更のスキルがあり、トリミングや画質調整なども行う用意ができている方になります。

なぜ画像サイズを気にするの?

画像の容量が重ければ重いほど、表示にも負担がかかります。

表示に負担がかかるのは見ている人にとってもストレスになりますし、インターネットのやり取りにも優しくありません。
結果、サイトやブログの評価が下がってしまい検索でも不利になる可能性もあります。

しかし、画像が小さければサイトが軽くなるのですが、画像が荒くなったり、見るに堪えないぼやけた画像だとそれもまた気になります。

結局「中間を取る」ことが近道だとは思いますが、その中間ってどのくらい?と思いますよね。
私も実際のところ答えは決まっていません。

5Gが主流になっていく日本で、それほど画像サイズを気にすることは無くなってはいますが、その時代の流れとともにデジカメやスマホの画像サイズも増えているんですよね。
だから結局サイズを考えなくてはならないのです。

では、実際に使用しているサイズを公開します。
これは世間の標準だとは限りません。

あくまでこの人はこうなんだ、程度でたたき台の参考の一つにしていただけたらと思います。

実際にやってみて自分なりの最適なサイズを見つけられることを願います。

ポートレートサイト・ブログ画像サイズ例

通常画像・記事内画像サイズの例

800x533ピクセルの画像

800ピクセルx533ピクセル (3:2)
800ピクセルx800ピクセル (1:1)
など

基本的に縦横は一眼デジカメの撮影比率の3:2を基準としています。
時には1:1の正方形。
ポイントは意外と大きめの画像で統一していること。本音を言えば1000ピクセルでも良いのですが、やはり容量が大きくなりすぎるのを考慮して800ピクセルに抑えています。
600ピクセルでもOKです。

本来なら300ピクセルなどのような表示だとしても、元画像は600~800ピクセルで作っています。

「表示サイズ」が大きすぎるという方は、表示だけ600ピクセルなどにしてみると良いと思います。

理由

当事務所での制作サイトの多くは、ページ部分の幅 (ブログでは記事部分) を800~1,000ピクセルにしています。
レスポンシブにすると、スマホやタブレットなどの表示媒体によって画像がぼやけてしまうので大きめにしています。

バナー画像サイズの例

800x533ピクセルの画像

幅600~800ピクセル

バナー画像も通常画像と同じサイズ幅で制作しています。
上の画像は800×533ピクセルの画像を300×200ピクセルのサイズで表示していますが、元の画像が大きいので表示媒体が変わってもそれほど違和感なく表示されます。

逆に希望表示のサイズ (例えば300×200ピクセル) のままで作ってしまうと、スマホやタブレットなどの表示で見え方が変わり、ぼやけてしまうことも少なくありません。

理由

例え表示サイズを300ピクセルにしても、表示媒体によって見え方が変わる可能性もあります。
後々大きなバナーに転換したり、転用しやすいように、あらかじめ大きめに制作しています。

 

フルスクリーン画像サイズ例

ホームページトップ画像フルスクリーン

1500×800ピクセル

理由

横幅1500ピクセルだと私の使用しているディスプレイでも両端が空いてしまうのですが、ブラウザを開いている人にはお気に入りブックマークをサイドバーに表示している人も少なくないかと思いこのサイズにしました。
逆に1500ピクセルを超えるとファイル容量が大きくなり、画像が重くなるためフルスクリーンでもある程度のサイズで決めました。
1800ピクセルなどの完全な画像の方が、フルスクリーンでは端の余白ができずに画像もきれいですが、あえて1500ピクセルをディスプレイ画面に合わせて拡大しています。
それほどビジュアルを売りにしたサイトを作っていないのも理由です。

サイドバー画像サイズの例

幅600~800ピクセル

当事務所の場合、サイドバーの幅は300ピクセルで設定するものが多いようです。
しかし、サイドバー用画像も通常画像と同じサイズ幅で制作しています。

理由

例え表示サイズを300ピクセルにしても、表示媒体によって変わる可能性もあります。
後々大きなバナーに転換したり、転用しやすいように、あらかじめ大きめに制作しています。

Retinaディスプレイ対応用画像の例

Retinaディスプレイはアップル製品で主に利用される高解像度表示ディスプレイです。
このディスプレイで表示すると、わりと多くの画像がぼやっとした表示になってしいますので、それ相応の画像サイズで対応しなければならないのです。

しかし当事務所の場合、閲覧者像やサイトの特性によって画像のサイズをある程度絞っています。

ロゴ

幅800ピクセル程度

ロゴはRetina用に大きめに制作していますが、それほどしっかりと大きなサイズで利用しているわけではありません。
認識できる不快ではない程度の表示として、このサイズにしています。

その他の画像

その他の画像は残念ながら通常のサイトの画像と同じサイズにしています。
当事務所のサイト制作の意図はデザイン性やビジュアル性よりも、マーケティングやSEOに重きを置いているため、妥協と言わざるを得ない判断としました。

 

 

タイトルとURLをコピーしました