ブログで使う画像サイズと形式

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

画像サイズはなぜ大事？

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

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

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

ホームページで使う画像サイズの目安

メインビジュアルなど大きな画像

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

• 推奨ファイルサイズ:200KB〜500KB
• 画像サイズの目安
  • 横幅: 1200px ～ 1600px
  • 縦幅: 300px ～ 600px

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画像）としても適切に表示されるため、統一して使用することをおすすめします。

アイコンやロゴ画像

• 推奨ファイルサイズ: 20KB ～ 100KB
• アイコンやロゴなどの小さな画像は、できるだけ軽量化することが重要です。
  特に背景が透明な場合は、PNG形式をつかうとファイルサイズを小さく保存できます。

ブログのおすすめアイキャッチ（見出し）画像サイズ

SWELL

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

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

note

クリエイターページ/マガジンヘッダー画像 アイキャッチ画像 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対策としての画像最適化

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

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