MENU
オウチでの出来事、書き綴ります！
  1. ホーム
  2. blog
  3. ブログで掲載する画像の最適サイズは？

ブログで掲載する画像の最適サイズは？

blog
当ページのリンクには広告が含まれています。
kindle
Amazonお得情報

見逃していませんか？あなたの欲しいものが安く購入できるかも。

人気の商品が日替わりで登場。毎日お得なタイムセール▼

Amazonタイムセール会場
はこちら
Amazonのお得な定額サービス

▶ プライムビデオ　月額500円　⇒30日無料体験
　⇒人気映画やドラマ、テレビ番組、Amazonオリジナル作品を見放題

▶ Kindle Unlimited　 月額980円　⇒　30日無料体験
　⇒200万冊以上の電子書籍（小説、漫画、雑誌など）が読み放題

▶ Amazonオーディブル　月額1500円　⇒　30日無料体験
　⇒プロのナレータが朗読した本をアプリで聞き放題

▶ Amazon Music Unlimited　月額980円　⇒　30日無料体験
　⇒好きな音楽を好きなだけ。オフライン再生も可能！

前回は、フリー画像を提供するサービスのご紹介をしましたが、
今回はその画像をご自身のブログに掲載する際に、どのくらいの形にリサイズして掲載するのが良いのかを書いていきます。
 
今でこそネットのスピードが速くて、あまり画像のサイズというのをそんなに意識する必要はなくなってきたのかもしれませんが、昔は回線が64kbpsとか128kbpsの時もあって、大きな画像がページに使われていると、「なんて表示が遅いんだ！！」とイラついてましたね～１5年くらい前？、いやいや２０年前？？（笑）
 
目次

画面比率（アスペクト比）について

kindle
 
　カメラなどで撮影する画像の縦横比のことを言います。
自分が今使っている一眼レフカメラ「EOS Kiss X7」では、
 
［3：2］［4：3］［16：9］［1：1］の4つが設定できるようですが、デフォルトは［3：2］のようです。
掲載している「Kindle&ミニカップ」は、デフォルト設定で撮ったものです。
 
一般的には、画面比率は下記のように整理されます。
 
３：２（1.5：１）
４：３（1.34：１）
１６：９（1.78:1）
１：１
（そのまんま）
フィルムカメラ、デジタル一眼レフカメラの主流
コンパクトデジタルカメラやミラーレス一眼の主流
アナログテレビ
テレビ（地デジ）の映像
ー
横は風景撮影、
縦は人物撮影に適している
あらゆる撮影に適している
よりワイドな風景に適している
人の顔や料理画像のアップに適している
 
それぞれ用途に応じて、最適なサイズがありますが個人的には３：２が好きです。
広さ感もあっていいのではないでしょうか。↓３：２（横300px 縦200px）です。
 
kindle
 
 

フリー画像サイトのアスペクト比率は？

 
ということで、フリー画像のサイトの画像比率を調べてみました。
前回の記事でご紹介した、「pixabay」「写真AC」「PAKUASO」からサンプルを３つずつですが。。。
 
　画像検索してみて、パット見たときに直感的に一番多そうな画像サイズを開いています。
少しは違ったサイズはありましたが、少数派です。
 
 
 
pixabay
写真AC
PAKUTASO
自然風景
3072×2048px
(3:2)
4928x3264px
(3:2)
4928×3280px
(3:2)
食べ物
6000×4000px
(3:2)
5760x3840px
(3:2)
6720×4480px
(3:2)
人物
3042×4563px
(2:3)
5760x3840px
(3:2)
5472×3648px
(3:2)
 
結論としてはすべて「３：２」です。
※pixabayの一番下の人物は、「ポートレート写真」で、縦横逆になっているだけですね。
 
おそらくどのサイトも本当にきれいでセンスのいい写真ばかりですので、
かなりスペックの一眼レフを使っているかと思います。
なので、先の説明のように一眼レフの主流である「３：２」の画像が非常に多いのでしょう。
 
有名どころのフリー画像サイトも使って、ブログ作成する場合において、統一感を持たせるのなら、
「３：２」の画像比率ですすめていくべきとの結論に至りました。
 
フリー画像だけでなく、自身で撮った写真も活用して作っていくのなら、
撮影サイズも「３：２」と決めておいた方がいいですね。

画像サイズについて

上記に挙げたどのフリー画像サイトも、ダウンロードできるファイルサイズを用途に応じて選択できます。
例えばPAKUTASOであれば、S（ブログサイズ）、L（高解像度版）と二種類選べるようになっています。
 
S　：画像サイズ　1600 ｘ 1066　ファイルサイズ　527 KB
L　：画像サイズ　6720 ｘ 4480　ファイルサイズ　6.31MB
 
Lサイズでの掲載はまずあり得ません（笑）
これだけで表示するのに数秒かかっちゃいます。
 
ということで、Sサイズをダウンロードするのですが、そのまま掲載してよろしいのでしょうか？
画像サイズの最適解を探すときの条件は、「読者にストレスなく快適にページを読んでいただける」ことだと思います。
 
そうなると、もう少し具体的な条件と優先順位を考えてみると、
  1. 画像のダウンロードサイズが必要最小限で済むこと
  2. ブログのテンプレートにマッチしていること
  3. 表示環境（PC,スマホなど）で拡大、縮小のリサイズ処理無しで済むこと
そうすると、３．は近年の目まぐるしいパソコンスピードを考えると、そんなに重要視する必要はないかと思います。
テンプレートにあった画像サイズまでリサイズしてあげるのがベストですよね。
 

テンプレートにマッチした画像サイズの図り方

自分のテンプレートの画像サイズがどのくらいなのか、簡単に図る方法をご紹介します。
空の表を作成して、ソースをちょっといじってあげます。
「<table style=”width: 300px;”>」
赤字の部分を丁度いい数値に合わせてみるやり方です。
ちなみに、800～300で数値を入れ替えてやってみました！
800px: はみ出てます！
700px: はみ出てます！
 640px:バッチリ！
600px: 足りない！
500px: かなり足りない
400px: 全然足りない
300px: そろそろアイキャッチサイズ？
kindle
 
すいません、簡単といいましたが、意外と手間がかかりました！
 
このページは、640pxがぴったりはまりました！
 
ですが、もしテンプレートを変更する可能性がある場合は少し大きめに見ておいたほうが
良いかもしれません。
 
700px～800pxくらいにしておいて、少しはみ出た部分は自動的に画像圧縮して表示されます。
 

まとめ

  • ブログに掲載する画像の比率のおすすめは『４：３』
  • 掲載する画像サイズは、ストレスなく表示されるサイズを選ぼう！
  • ブログテンプレートの記事の幅もしくは、ちょっと大きめが最適サイズ
blog
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

T9のアバター T9

関連記事

目次