ブログの画像サイズは幅1200px・500KB以下が目安

ホームページを作るときに、写真やイラストなどの画像サイズや、ファイル形式を気にしたことはありますか？
使う画像をうまく選ばないと、画像が重くなってページが遅くなって、見ている人がすぐにページを閉じてしまうことがあります。また、画像が小さすぎると、画質があらくなり、見映えも悪くなってしまいます。

えみ

今回は、ホームページに載せる画像の「サイズ」や「形式」について、どうやって選べば良いかをお話しします。

画像サイズはなぜ大事？#

画像をインターネットに載せるときは、その画像の「サイズ（縦幅と横幅）」を決める必要があります。

画像が大きすい→ファイルサイズが大きくなる→ページの表示が遅くなる。
見ている人が待てずにページを閉じてしまったり、検索エンジンからの評価にも悪影響を与える可能性があります。

そのため、画像サイズはできるだけ小さくしておきましょう。

トップページののメインビジュアルや、画面いっぱいに表示させる画像はきれいな画質で表示させつつ、ページの表示速度も早めにしたいですよね。

PCやスマホによって

写真の場合（色の多い画像やグラデーションが多い）
- 横1200px × 縦600px、横1600px × 縦800pxなどがおすすめ
- 圧縮をうまく行えば、500KB以下で収められます。
グラフィックデザインやロゴの場合（色数が少ない、シンプルなデザイン）
- 横1200px × 縦300px、横1600px × 縦400pxあたりがおすすめ

このサイズと形式で保存した場合、200KB ～ 500KBの範囲に収まることが多いです。

記事内の画像はコンテンツの幅にあわせておさまります。
SWELLテーマはデフォルトで横幅は最大1200pxなので、フルサイズの画像は1200pxまでの幅で表示されます。

推奨ファイルサイズ：100KB〜300KB
画像サイズの目安：
- 1200px x 675px（横長の画像：16:9のアスペクト比）
- 1200px x 900px（正方形に近い画像：4:3のアスペクト比）
- 800px x 600px（小さめの画像）

記事一覧などに表示される見出し画像のことです。

推奨ファイルサイズ: 100KB〜200KB。
画像サイズの目安：横幅1200px × 縦幅630px
- 上記はSWELLテーマで使用するアイキャッチ画像の推奨サイズです。（アスペクト比は1.91:1）。
  このサイズだと、SNSでのシェア画像（OGP画像）としても適切に表示されるため、統一して使用することをおすすめします。

外観＞カスタマイズ＞記事一覧リストの「サムネイル画像の比率設定」で比率を設定することができます。

OGP(1.91:1)	横1280px × 縦670px
wide(16:9)	横1280px × 縦720px

クリエイターページ/マガジンヘッダー画像
アイキャッチ画像
OGP(1.91:1)

横1280px × 縦670px
横1920px × 縦1006 px（よりはっきり表示させたい場合）

画像にはいろいろな形式（フォーマット）があります。
適切なファイル形式を選ぶことで、きれいな画質のままファイルサイズを小さくできます。

JPEG（ジェイペグ）：
写真や風景の画像など、色の数が多い画像ににぴったりの形式です。
高画質のまま、しかもファイルが小さくなります。

PNG（ピング）：
PNGは、背景を透明にしたい画像や色の数が少ない画像に最適です。
例えば、ロゴやアイコン（小さな画像）の場合は、PNGを使うときれいに表示されます。
色がたくさんある画像には、サイズが大きくなってしまうことがあります。

WebP（ウェッピー）：
WebPは、JPEGよりもさらに小さなファイルで、高画質を保つことができる新しい形式です。
もし、WebPが使えるなら、これを使うとページの表示が速くなります。

GIF（ギフ）：
GIFは、動く画像に使います。アニメーションを作りたいときにぴったりです。逆に、静止画にはあまり向いていません。

画像を小さくする方法の一つに、「圧縮」があります。
圧縮すると、画像のサイズが小さくなり、ページの表示が速くなります。画像を圧縮するための便利なツールを紹介します。

TinyPNG：
TinyPNGは、画像を圧縮してくれるオンラインのツールです。
URLにアクセスして画像をアップロードするだけで、簡単に圧縮した画像に変換してくれます。
ImageOptim：
これは、Macを使っている人におすすめのツールです。
ソフトを開いて、画像をきれいに圧縮してくれます。複数の画像を一括でも圧縮できます。
EWWW Image Optimizer：
WordPressを使っている場合、このプラグインを使えば、WordPressにアップロードした画像を自動で圧縮してくれます。

SEO（検索エンジン最適化）とは、Googleなどで自分のページを上に表示させるための工夫のことです。
画像にもSEOが関係していて、画像のサイズを最適化することで、検索順位が上がることがあります。

Altテキスト（代替テキスト）：
Altテキストは、画像が表示されない場合に、その画像が何を表しているかを説明する文章です。例えば、「黄色い花の写真」や「猫のロゴ」などを入れておきましょう。これもSEOにはとても大切です。

画像のファイル名：
画像の名前は、「yellow-flower.jpg」や「cat-logo.png」のように、画像が何かを説明する名前をつけましょう。これで、Googleが画像を理解しやすくなります。

用途	推奨サイズ (px)	推奨ファイル形式	推奨ファイルサイズ
トップページ・バナー画像	1200px × 630px (横長)	JPEG, WebP	200KB ～ 500KB
記事内画像	1200px × 675px（横長）または800px × 600px（正方形）	JPEG, WebP, PNG	100KB ～ 300KB
サムネイル画像	150px × 150px（正方形）	JPEG, PNG	50KB ～ 150KB
アイキャッチ画像	1200px × 630px (横長)	JPEG, WebP	200KB ～ 500KB
OGP画像	1200px × 630px (横長)	JPEG, WebP	200KB ～ 500KB
ロゴ・アイコン	100px × 100px（正方形）	PNG, SVG	20KB ～ 100KB

画像を適切なサイズにし、正しい形式を選ぶことで、ページの表示が速くなり、より多くの人にページを見てもらえるようになります。
画像のサイズや形式を意識して、ホームページやブログをもっと快適にしていきましょう。