こんにちは、ダニエルです。
下記のお悩みございませんか？
ブログの最適な画像サイズが知りたい。ブログを始めてみたけど、掲載する画像のサイズはどう気をつければ良いの？
上記のお悩みについて解説していきます。
結論から言うと、「これが最適解」と言うサイズは存在しません。なぜなら、画像の調整はとても複雑で、掲載する場所によって必要なサイズが違うからです。
しかし、サイズを考える上での「共通の考え方」は存在します。これを知っておくことで、どんな場面でも適切に対応できるようになります。
- ブログの画像サイズの最適解は、存在しません
- ブログにおける画像サイズの調整方法
- ブログの画像サイズとセットで知っておくべき情報
私は現役のWebデザイナーでして、現在はフリーランス4年目です。
以前はWeb制作会社でも働いており、実際に多数のWebサイト制作を行ってきました。また、大手スクールでWebトレーナーとしても活動中です。
Contents
ブログの画像サイズの最適解は、存在しません
繰り返しになりますが、「これが最適解」と言うサイズは存在しません。下記の内容について解説していきます。
- ブログの画像サイズには、２つの軸がある
- ブログの画像サイズの考え方
- ブログの画像サイズで守るべき流れと目安
それでは1つずつ見ていきましょう。
ブログの画像サイズには、２つの軸がある
画像サイズには大きく分けて2つの軸があります。下記の2つです。
- ピクセルサイズ（縦横の大きさ）
- 容量サイズ（ファイルの重さ）
上記、2つの軸があります。
そして、この「ピクセルサイズ」と「容量サイズ」のバランスを取ることが重要になります。
順番に説明します。
ピクセルサイズは、解像度（綺麗に見えるかどうか）に直結します。ピクセルとは「粒」のことで、ディスプレイは細かい粒の集合体で映像を表示しています。
単位は「px」で表し、粒の数が多ければ多いほど綺麗に見えます。
- （例）スマホだと、375px前後。
- （例）パソコンだと、1440px前後。
つまり、大きな画面で見られる場合には、より多くのピクセル数が必要です。
容量サイズはサイトの表示速度に影響します。
Webサイトが表示されるときは、下記の処理が行われています。
- 読者がサイトを訪問
- 読者のデバイスに画像データが送信される
- データの容量が大きすぎると、表示までに時間がかかる
- 待たされたユーザー、「重いサイト」と感じて離脱する
したがって、容量サイズは重くなりすぎないように考慮する必要があります。
ブログの画像サイズの考え方
繰り返しになりますが、「ピクセルサイズ」と「容量サイズ」のバランスを取ることこそ命です。
- NGな例：ピクセルサイズが十分、しかし、容量が大きすぎる
- NGな例：ピクセルサイズが不足、しかし、容量はちょうど良い
- OKな例：ピクセルサイズが十分、かつ、容量もちょうど良い
どちらかに偏りがあってはいけません。バランスが保たれた「ちょうど良い画像」を目指すべきなのです。
ブログの画像サイズで守るべき流れと目安
下記の流れに沿って画像を調整しましょう。
- 手順①：対象画像の最大表示サイズを確保する
- 手順②：可能な限り容量を削減する
まずは「最大でどれくらいの大きさで表示されるか」を基準に考えます。
ブログはいろんな人に見られるので、表示するデバイスの大きさもあらゆる種類が想定されます。前述したように、ピクセルサイズは解像度に直結し、ピクセルサイズは大きいほうが画像が綺麗に表示できます。
しかし、容量サイズも大きくなってしまってはいけないので、必要以上にピクセルサイズは大きくしない設計が必要です。
つまり、表示される可能性のある最大サイズまでの大きさで用意しておけば、必要最低限のサイズとなり、容量も少なく抑えることができるわけです。
✔︎ ピクセルサイズの目安
画像が表示される場所によって、目安となるサイズは異なってきます。
場所はだいたい下記のとおり。
・アイキャッチ画像
・記事本文で使う画像
・トップページなど幅いっぱい使う画像
まずは記事本文で使われる画像を考えます。例として、私のブログ（今、ご覧いただいているブログ）で考えてみましょう。
一般的なPCレイアウトを考えれば、2カラムになっていることが多いです。
私のブログの場合、記事本文が書かれているページでは２カラム構造になっています。つまり、
左側→記事本文
右側→サイドバー（カテゴリー一覧など）
記事本文の横幅は、見られるデバイスの大きさによって多少変動します。
1440px（よくあるPCサイズ）→記事本文の横幅は、680pxくらい。
1920px（大きめなPCサイズ）→記事本文の横幅は、1200pxくらい。
上記のとおり、見られるデバイスによって必要な画像サイズも変わります。
画像は1000px程度は必要になります。
つまり、投稿領域なら1000pxあればOK。
PCディスプレイでの最大幅 → 1920px（FHDの場合）。
どこに使う画像かによって変わるので、考えてみてください。
アイキャッチ画像については、サイズが固定されています。
✔︎ ブログの場所別サイズ例
アイキャッチ画像 → 1200〜1280px × 600〜700px
記事本文中の画像 → 最大1000px程度
トップページの大きなビジュアル → 最大2000px程度
必要なピクセルサイズが分かったら、あとは可能な限り要領を小さくするだけです。
✔︎ 画像容量の目安
１枚につき、100KB〜300KB程度。
実際にはページ全体の画像のトータルボリュームも大切。
ページに画像が多いほど、１枚あたりの容量は削減したいところ。
ちなみに、容量の大きさを示す単位についてご説明しておきます。
容量の大きさにはバイト（B）を使って表します。距離を表す単位メートル（m）のように、上位の単位が存在します。
B（バイト） ＜ KB（キロバイト） ＜ MB（メガバイト） ＜ GB（ギガバイト）
つまり、下記のとおりです。
- 1000Bは、1KB。
- 1000KBは、1MB。
- 1000MBは、1GB。
画像サイズの確認方法
画像のサイズはどうすれば分かるの？についてご案内します。
WindowsとMacで確認方法が少し違います。下記のとおりです。
①フォルダ→②画像を選択→③右クリック→④プロパティ
①Finder→②画像を選択→③右クリック→4情報を見る
ブログにおける画像サイズの調整方法
ここまで説明してきたサイズの考え方に基づいて、画像サイズを決めていきますが、特に困るのが画像の容量サイズ調整。
しかし、画像の容量サイズを簡単便利に抑えることができる調整方法がありますのでご紹介します。
- 圧縮ツールを活用する
- 形式を変更する
1つずつ見ていきます。
圧縮ツールを活用する
- i love IMG
- Photoshop
https://www.iloveimg.com/ja/compress-image
書き出し時に、画質を調整する
形式を変更する
Webpに変換する
- 手順①：サルワカのページにアクセス
- 手順②：画像を選択する
- 手順③：画像を変換する
https://saruwakakun.com/tools/png-jpeg-to-webp/
バージョンアップしていないMacで表示されない恐れ：
Safariの一部で表示されない可能性があるが、OSバージョンアップとともにSafariのバージョンも上がるはず、サボっている人のPCで表示されない恐れあり
ブログの画像サイズとセットで知っておくべき情報
素材サイト（フリーあり）
- Unsplash（無料）
- Photo AC（一部無料）
- Adobe Stock（一部無料）
ページの表示速度をチェックする
Google公式の「Page Speed Insights」で計測可能
最後にまとめます。
- ブログ画像の最適解は存在しない。重要なのは「ピクセル」と「容量」のバランス
- 画像は掲載場所によって必要なピクセル数が異なる
- 画像容量は1枚あたり100KB〜300KBを目安に調整
- 圧縮ツールやWebP変換を活用して、軽くて綺麗な画像を準備
- 表示速度やユーザー体験の観点で調整することが大切
ブログを運営する上で、画像は「読みやすさ」と「滞在時間」に直結します。
ぜひ今回の記事をご参考にしていただき、ブログ制作してみてください。
以上、ご閲覧いただきありがとうございました！
