【決定版】ブログに最適な画像サイズの決め方

ブログに最適な画像サイズはどれぐらいだろう?という悩みが解決できるまでに考えたことや、具体的な数字の決め方などを丁寧に解説していきます。

 

1. 画像サイズを決める3つの要素

  1. アスペクト比
  2. 解像度
  3. 容量

画像のサイズを決めるには、この「 3つの要素 」を考える必要があります。早速ですが結論です。

 

  • 16:9
  • 1200 × 675 px
  • 100KB程度

試行錯誤した結果、この数字に落ち着きました。ではなぜこう決めたのか? 各要素の概要を押さえつつ詳しく解説していきます。

 

 

2. アスペクト比(縦横比)

アスペクト比とは縦の長さと横の長さの比率の事。数字だけ見てもよく分からんという事で、とりあえず各比率の画像をブログに貼り、様々なシチュエーションで見比べました。その結果テキストとのバランスが最も良いと体感できたのが、アスペクト比「 1:1.7 」辺りでした。

 

アスペクト比一覧表

有名どころをピックアップした一覧表で、上から下に行くにつれて横長の画像になっています。解像度の横幅はこのブログに合わせて1200pxで設定。短辺を1とした時の比率も合わせて記載したのでイメージしやすいかと思います。

アスペクト比 解像度(横×縦) 短辺1の比率
スクエア 1200×1200 1:1
4:3 1200×900 1:1.333
白銀比 1200×849 1:1.414
3:2 1200×800 1:1.5
黄金比 1200×742 1:1.618
白金比 1200×693 1:1.732
16:9 1200×675 1:1.778
1:2 1200×600 1:2
シネスコ 1200×511 1:2.35
第二黄金比 1200×458 1:2.618
1:3 1200×400 1:3
青銅比 1200×363 1:3.303

 

端末での見栄え

パソコンで見た場合(横長)と、スマホで見た場合(縦長)の印象はけっこう違いました。小さすぎるとインパクトに欠けるし、大きすぎるとPCで見た場合にテキストとのバランスが悪く読みにくさを感じてしまいます。スマホで見てもパソコンで見てもちょうど良い大きさは?と見続けた結果、短辺を1としたときの比率は「 1:1.6 〜 1:2 」辺りが無難だなという結論に。

「 1:1.4 」辺りもスマホだとインパクトがあって良かったのですが、パソコンでは大きすぎる…

 

 16:9 とは?

アスペクト比にはいくつか有名な比率があるのですが、その中でも馴染み深い比率の一つが「 16:9 」です。テレビやゲームの画面など幅広くこの比率が使われています。YouTubeの標準アスペクト比もこの比率であるため、そのままブログに貼っても画像との統一感が保てるので汎用性高いなと。この時点で有力候補へ。

「16:9」 は、「黄金比」や「白銀比」と同じような ” 名称 ” だと思ってもらえればOKです。

 

撮影と編集

ブログ画像はスマホで撮ることも多いです。出来るだけ作業を簡略化できないかな〜と模索中に、iPhoneのカメラは「16:9 の比率に固定」できると気付きました。この設定のおかげでとりあえずで撮ったiPhoneの写真をそのまま使える状況を作れますし、基本となる数字がある事で画像を編集する上での迷いも無くなります。撮影と編集の作業効率UP。アスペクト比決定。

iPhoneの標準カメラでは、「16:9」「スクエア」「4:3」の3つのアスペクト比が設定できます。

 

アスペクト比まとめ

  • 馴染み深く汎用性が高い比率
  • スマホ・パソコン両方でバランス良
  • 比率を固定し撮影と編集の作業効率UP

以上のことを総合的に考え、アスペクト比は「 16:9 」に決定。これで基本となる比率が設定できました。

 

 

3. 解像度(縦横の長さ)

ここでいう解像度とは、画像の大きさ(縦と横の長さ)というイメージでOKです。これも色々考えましたが、解像度は「 1200px(横) × 675px(縦)」が最適だと判断。以下理由を説明していきます。

解像度は大きくなるにつれて画質も上がりますが、容量も重くなり、表示スピードも遅くなります。

 

端末の画面サイズ

端末の画面サイズも画像と同じく解像度で表せます。おおよそのサイズ感は下の表を参考に。例えばですがスマホでしか見ないのであれば画像の横幅は500px程度でも十分です。逆に3000pxなんてあってもPCで見たって無駄に重いだけだったりします。最近はモバイル端末で見る人の方が多いですが、少なくともパソコンで見た時の画面サイズぐらいの大きさには対応しておきたいところ。

解像度(横)
スマホ 400px 程度
タブレット 900px 程度
パソコン 1200px 程度

 

一般的な記事コンテンツ幅

一般的なブログのコンテンツ幅は、600~900px前後で設定してある場合が多いと思います。テキストのサイズにもよりますが、大きな画面で端から端まで視線移動するのは読みづらいですのでこの辺りが妥当です。このブログもその範囲内です。

 

画像の横幅の決め方

結局のところ何ピクセルがいいの?って事なんですが、結論「記事コンテンツ幅の最大値に合わせる」のがベストだと判断。パソコンの全画面で見た時のサイズです。これ以下になってしまうと、例えばコンテンツ幅の最大値が1000pxあるのに500pxの画像を貼ったりすれば画像が見切れたり無理やり引き伸ばされたりします。なので少なくとも最大値に合わせる必要があります。

 

なぜ1200pxなの?

このブログは記事コンテンツ幅が通常時800pxで設定してあるのですが、レスポンシブデザインとの兼ね合いや、設定によって最大1200pxのコンテンツを表示できるのでその最大値である「 1200px 」に合わせています。少しでも画質を良くしたいとの考えもあり、若干余裕を持たせたサイズ感。後述する容量の範囲内に収まるという事も考えた上でです。

 

解像度まとめ

  • パソコンの画面サイズには対応したい
  • 記事コンテンツ幅の最大値に合わせる
  • 1000px 程度が無難

以上のことを踏まえ、解像度は「 1200px × 675px 」に決定。これで基本となる解像度が設定できました。

 

 

4. 容量(重さ)

画像の容量は、リサイズして、圧縮して、「100KB程度」に抑えましょう。サイトを読み込む際にとても大きなインパクトを与えるのがこの画像の容量です。軽ければ軽いほどサイトの表示スピードが速くなり、Googleからの評価も上がります。

画像の容量は、解像度(ピクセル数)と、表現に必要な色の数(ビット数)で決まります。

 

リサイズする

容量を抑えるためには、まず画像(縦と横の長さ)をリサイズ(小さく)します。Macを使っている僕は最初から入っている「プレビュー」というアプリで「1200px × 675px」にリサイズしています。

Macで写真をダブルタップ(クリック)→  でサイズ調整できます。

 

圧縮する

画像圧縮アプリというのがあります。細かい説明は省きますが、リサイズした後にここを通す事で画像が更に軽くなり、見た目はほとんど変わりません。凄い。

何度も圧縮すると画像の粗さが目立ってきますので、1度で十分だと思います。

 

容量は200KB以内に抑える

先ほど紹介した「 リサイズ 」と「 圧縮 」をする事で、画像の容量は大体「 200KB〜100KB程度 」に抑えられていると思います。これだけ軽くできれば、1つの記事で画像をたくさん使ったとしても安心です。

100KB前後を目安に容量を抑えるようにしましょう。大きくても200KB以内には抑えたいところ。

 

スマホで撮った写真の容量

ちなみに、スマホで撮った写真なんかはとても容量が大きいです。例として iPhone SE で撮った写真1枚の内訳ですが、容量:3MB(3000KB)、解像度:1536px × 2049px ぐらいありました。ブログでそのまま使うには大きすぎるので、ダイエットは必須。

 

容量まとめ

  • リサイズする
  • 圧縮する
  • 容量は100KB程度が目安

 

 

あとがき

ブログに最適な画像サイズを考える上で必要な「アスペクト比解像度容量」について解説していきましたが、いかがだったでしょうか。意外と「画像」というものも奥が深いですよね。

今回、この記事をまとめてから画像サイズを統一してみたのですが、サイト全体のバランスが取れ、見栄えも良くなり、作業も効率化できるように。画像に対しての迷いが無くなったので楽になりました。

もちろん、スマホでのスクショ(縦長)や、パソコンでのスクショなど、場合によっては今回の数字にこだわる必要はないですが、基準となる数字は持っておいて損はないかなと。この記事が、最適な画像サイズを見つける手助けになれば幸いです。

 

画像サイズの基準
  1. アスペクト比: 16:9 
  2. 解像度: 1200px × 675px
  3. 容量: 100KB程度

 

合わせて読みたい

当ブログで使われている画像サイズ(スマホのスクショなども)をまとめた記事も用意したので、よかったら参考にどうぞ。

【厳選】当ブログで使われている画像サイズまとめ
アイキャッチ・スマホのスクショ・パソコンのスクショ・バナー広告など、当ブログで使われている画像サイズを全てまとめまていきます。