ブログ画像のおすすめサイズ:迷ったときの考え方(アイキャッチ/本文)

公開日

ブログ画像でよくある悩みが、

画像サイズがわからない

  • どのくらいのサイズ(px)にすればいい?
  • 大きくすると重いし、小さいとぼやける…

というものです。

この記事では「ブログ画像のおすすめサイズ」を、固定の正解ではなく、迷ったときの考え方をまとめてみました。

まずは使う場所で分ける

ブログ画像は、よく使う場所で必要サイズが変わります。

  • アイキャッチ(記事の顔)
    • アイキャッチは、記事の内容や魅力をひと目で伝えてクリックを促すために、記事の冒頭や一覧で表示される画像です。
  • 本文の画像(説明用)
  • サムネイル(一覧表示)
    • サムネイル(一覧表示)とは、記事一覧などで内容がひと目で伝わるように表示される小さな画像です。

おおよその目安(例)

環境やテーマにもよりますが、迷ったときの例としては

  • アイキャッチ:横1200px前後
  • 本文:横800〜1200px前後

あたりから検討すると進めやすいです。

※サイトテーマの表示幅に合わせるのが基本です。

大きすぎる画像は避けよう(重くなりやすい)

例えば、表示は横1200pxなのに

  • 横4000pxの画像

を入れると、容量が大きくなりやすいです。

表示に必要な大きさに整えてから圧縮すると、軽量化しやすいです。

形式の考え方(PNG/JPG/WebP)

  • 写真:JPGやWebPが向いています
  • 文字・図解:PNGのほうが向いています

※ ただしPNGは重くなりやすいので、WebP変換で軽くなる場合があります

Petanko Imageで整える

Petanko Imageは、画像を軽く・扱いやすくするためのWeb向け画像最適化サイトです。

ブログ掲載前に

  • 圧縮
  • WebP変換

をしておくと、扱いやすくなる場合があります。

【画像例】

圧縮前のPNG画像
Before:2.2MB(PNG画像)
圧縮後のJPG画像
After:188.7KB(JPG画像)

※数値は一例です。画像内容によって変わります。

関連ツール

今後も、Webで扱いやすい画像づくりをサポートできるよう、改善を続けていきます。

お知らせ一覧へ戻る