ブログ画像サイズの正解は？アイキャッチ・本文のおすすめpxと容量を初心者向けに解説

• Facebook
• Twitter
• はてブ
• LINE
• Pocket

ブログに画像を入れるとき、「何pxで作ればいい？」「1200×630pxで本当にいいの？」「画像が重いとSEOに悪い？」と迷いますよね。

結論として、ブログ画像は用途によってサイズを変えるのが正解です。アイキャッチは1200×630pxを基本とし、本文画像は実際の表示幅に合わせて決めます。

この記事では、WordPress初心者でも迷わないように、画像サイズ・容量・形式・表示速度・SEOまで分かりやすく解説します。

ブログ画像サイズは用途別に決めるのが正解

ブログ画像には、「すべてこのサイズにすればよい」という絶対的な正解はありません。

アイキャッチ、本文画像、図解、スクリーンショットでは、表示される場所や目的が違うからです。

まず「結局何pxにすればいいの？」という人向けに、おすすめサイズをまとめます。

初心者なら、まずこの基準から始めれば十分です。

ただし、本当に重要なのは「1200px」という数字だけではありません。

ブログ画像の「サイズ」には2種類ある

ブログ画像について調べると、

「1200×630px」

「150KB」

という2種類の数字が出てきます。

この2つは意味が違います。

1200×630pxは画像の縦横サイズです。一方、150KBは画像ファイルそのものの容量です。

同じ1200×630pxでも、画像形式や圧縮率によって100KB程度になることもあれば、500KB以上になることもあります。

ブログ画像では、

縦横サイズを決める→ファイル容量を軽くする

という順番で最適化するのが基本です。

「横幅1200pxにしたから画像対策は完了」というわけではありません。

アイキャッチ画像は1200×630pxを基本にする

WordPressブログのアイキャッチ画像で迷ったら、1200×630pxを基本にすると扱いやすいです。

約1.91:1の横長画像で、記事ページだけでなく、OGP画像としてSNSなどで記事が共有されたときにも使いやすい比率だからです。

ただし、1200×630pxはWordPressが公式に定めている共通のアイキャッチサイズではありません。

WordPress公式では、テーマ側でアイキャッチ画像のサイズを独自に設定できる仕組みが用意されています。また、アイキャッチ画像のアスペクト比もテーマ設定によって変わります。

そのため、

1200×630pxを基準にする→使用中のWordPressテーマで推奨サイズや表示比率を確認する

という方法が確実です。

1200×630pxと1200×675pxはどちらがいい？

ブログ画像について調べると、

「1200×630pxがおすすめ」

という情報と、

「1200×675pxがおすすめ」

という情報があります。

どちらも間違いではありません。

違うのはアスペクト比です。

SNSなどでも1枚の画像を使い回したいなら1200×630px、16:9表示のWordPressテーマやGoogle Discoverをより意識するなら1200×675pxまたは1280×720pxがおすすめです。

GoogleはDiscover向けの大きな画像について、横幅1200px以上、30万画素を超える高解像度、16:9を推奨しています。

つまり、

SNSとの共用性を優先するなら1200×630px、Discoverをより意識するなら1200×675pxまたは1280×720px

と考えると分かりやすいでしょう。

ピクセル数より先にアスペクト比を確認する

「1200pxで作ったのにアイキャッチが切れてしまった」という場合、原因は画像サイズではなくアスペクト比かもしれません。

アスペクト比とは、画像の横幅と縦幅の比率です。

たとえば、

1200×675px

1280×720px

1920×1080px

は、すべて16:9です。

画像の大きさは違いますが、形は同じです。

テーマ側が16:9で画像を表示する仕様なのに1.91:1の画像を使えば、上下や左右の一部がトリミングされる可能性があります。

ブログ画像は、

掲載場所を確認→テーマの表示比率を確認→アスペクト比を決める→ピクセル数を決める

という順番で作ってください。

これが画像サイズで失敗しにくい方法です。

本文画像は「本文の表示幅」を基準にする

本文画像は「必ず1200px」と決める必要はありません。

最も重要なのは、実際の記事で何px程度の幅で表示されるかです。

WordPress公式でも、テーマのコンテンツ幅に応じて表示できる画像サイズが決まると説明されています。

たとえば本文エリアが800px程度なら、通常のブログ画像は横幅1200px前後を用意すれば十分です。

スクリーンショットの小さな文字などを鮮明に見せたい場合は、1200〜1600px程度まで用意してもよいでしょう。

反対に、本文では800px程度でしか表示しないのに、毎回4000pxや5000pxの画像をアップロードする必要はありません。

初心者なら、

通常の本文画像は横幅1200px前後

を基準にし、必要に応じて調整してください。

表示幅と元画像の幅は同じでなくていい

本文で800px幅に表示するからといって、元画像まで必ず800pxにする必要はありません。

高解像度ディスプレイでは、実際の表示幅より大きめの画像を使ったほうが鮮明に見える場合があります。

WordPressはバージョン4.4以降、レスポンシブ画像に標準対応しています。

画像をアップロードすると複数のサイズが作られ、srcsetやsizesを使って、ブラウザが画面幅や解像度に適した画像を選べる仕組みです。

つまり、

少し余裕のある元画像を用意し、実際の配信サイズはWordPressに最適化させる

という考え方が基本です。

図解はスマホで文字を読めることを優先する

図解画像は横幅1000〜1200px程度を基準にします。

ただし、図解で本当に重要なのは画像全体のサイズではなく、画像内の文字がスマートフォンで読めるかです。

パソコン上では大きく見える図解でも、スマートフォンでは横幅300〜400px程度まで縮小されます。

1枚の画像に文章を詰め込みすぎると、スマートフォンでは非常に読みにくくなります。

たとえば画像最適化の流れなら、

用途確認→比率決定→画像作成→圧縮→アップロード→スマホ確認

程度に絞ると分かりやすくなります。

図解は「1枚で1つの内容を伝える」と考えてください。

スクリーンショットは必要な部分だけ切り取る

WordPressの操作方法などを解説する記事では、スクリーンショットを使うことがあります。

この場合、パソコン画面全体をそのまま掲載するのはおすすめしません。

スマートフォンでは文字やボタンが小さくなり、「どこを見ればよいのか」が分からなくなるからです。

説明する場所だけを切り取り、必要なら矢印や囲み線を加えてください。

画像サイズとファイル容量を小さくできるだけでなく、読者にも内容が伝わりやすくなります。

スクリーンショットは大きくするより、見せる範囲を絞ることが重要です。

アイキャッチの端に重要な情報を置かない

アイキャッチ画像は、記事本文だけで使われるとは限りません。

トップページ、関連記事、ブログカード、SNS、Google Discoverなどでは、それぞれ異なる比率で表示されたりトリミングされたりする可能性があります。

そのため、タイトル文字や人物の顔など、絶対に残したい要素を画像の端に置かないようにしてください。

実務上は、重要な要素を画像中央の70〜80％程度に収めると使い回しやすくなります。

イメージすると、

余白｜重要な情報｜余白

という配置です。

GoogleもDiscoverでは画像を自動的にトリミングする場合があると説明しているため、重要部分を中央寄りにする考え方は有効です。

ブログ全体で画像サイズを統一する

記事ごとに、

1200×630px

1280×720px

1000×600px

1600×900px

とアイキャッチの比率を変えるのはおすすめしません。

記事一覧で画像の形が揃わず、ブログ全体に統一感がなくなるからです。

さらに、後からテーマやデザインを変更するときの修正も大変になります。

たとえば、

「アイキャッチは1200×630px」

「通常の本文画像は横幅1200px前後」

「細かなスクリーンショットは最大1600px程度」

と最初に決めておけば、毎回画像サイズを考える必要がありません。

1記事だけでなく100記事、200記事になったときにも続けられる画像ルールを決めることが重要です。

ブログ画像は容量・形式・SEOまで最適化する

ブログ画像は、縦横サイズを整えれば完成ではありません。

ファイル容量が大きすぎればページの読み込みに影響し、圧縮しすぎれば画像が見づらくなります。

Googleも、画像はページ容量の大きな割合を占める場合があるため、レスポンシブ画像などを活用して高画質と高速表示を両立することを推奨しています。

ブログ画像では、

適切なサイズ＋軽い容量＋分かりやすい内容

の3つを揃えることが大切です。

画像容量は100〜200KB程度を目標にする

一般的なブログ画像なら、1枚100〜200KB程度を実務上の目標にすると管理しやすくなります。

ただし、これはGoogleが定めたSEO基準ではありません。

Googleは高速表示と高品質な画像の両立を推奨していますが、「100KB以下」「200KB以下」といった一律の基準は設けていません。

たとえば画像を10枚使った記事の場合、

となります。

1枚では小さな違いでも、記事全体では大きな差になります。

ただし、100KB以下にすることを優先して写真が荒くなったり、図解の文字が読めなくなったりしては意味がありません。

必要な画質を確保したうえで、余分な容量を削るのが正しい考え方です。

JPEG・PNG・WebP・AVIFを使い分ける

ブログではJPEG、PNG、WebP、AVIFなどの画像形式を使用できます。

Google検索もJPEG、PNG、WebP、SVG、AVIFなど主要な画像形式に対応しています。

初心者ならWebPを基本にすると分かりやすいです。

WordPressはバージョン5.8からWebPに対応しています。ただし、WebP画像をWordPress上で処理するには、利用しているサーバーの画像処理環境もWebPに対応している必要があります。

AVIFはWordPress6.5から対応しており、こちらもサーバー環境がAVIFに対応している必要があります。

迷ったらWebPを使い、より高い圧縮効率を求める場合にAVIFを検討するとよいでしょう。

関連記事

WordPress初心者におすすめのレンタルサーバー4社比較｜失敗しない選び方 WordPress初心者向けに、エックスサーバー・シンレンタルサーバー・ConoHa WING・ロリポップ！を比較。料金……

スマホ写真をそのままアップロードしない

スマートフォンやデジタルカメラで撮影した写真は、横幅3000〜5000pxを超えることがあります。

ブログ本文で1000px前後しか表示しないなら、そのままアップロードする必要はありません。

基本的な流れは、

元画像→必要なサイズへ縮小→WebPなどへ変換→圧縮→WordPressへアップロード

です。

写真をたくさん使うブログほど、この習慣がページ容量やサーバー容量の削減につながります。

WordPressは大きすぎる画像を自動縮小する

WordPressには、大きすぎる画像を扱うための仕組みがあります。

WordPress5.3以降では、画像の幅または高さが初期設定の2560pxを超えた場合、Webサイトで利用するための縮小版が自動生成されます。初期のしきい値は2560pxです。

たとえばスマートフォンで撮影した横幅4000pxの写真をアップロードすると、通常はWeb表示用として最大2560pxに縮小された画像が作られます。

ただし、「WordPressが縮小してくれるから何でも巨大なままアップロードしてよい」という意味ではありません。

元画像もサーバー内に保存されるため、サーバー容量を考えるならアップロード前に適切なサイズへ整えておくほうが効率的です。

WordPressは1枚の画像から複数サイズを生成する

WordPressでは画像をアップロードすると、サムネイル、中サイズ、大サイズなど複数サイズの画像が生成されます。

さらにWordPressには高解像度画面への対応などを目的とした1536px、2048pxの画像サイズもあり、テーマやプラグインが独自サイズを追加することもあります。

つまり、

WordPressへ画像を1枚アップロードした＝サーバーにも1ファイルしか保存されない

とは限りません。

画像を大量に使用するブログでは、生成される画像もサーバー容量に影響します。

そのため、元画像を必要以上に大きくしないことが重要です。

PC用とスマホ用を毎回作る必要はない

「PC用に1200px、スマートフォン用に400pxの画像を別々に用意したほうがいいの？」と疑問に思う人もいるでしょう。

通常は必要ありません。

WordPressはsrcsetとsizesを利用したレスポンシブ画像に標準対応しています。

ブラウザが端末の画面サイズなどを判断し、WordPressが用意した複数サイズの中から適切な画像を読み込めます。

Googleもレスポンシブ画像を推奨しています。

ただし、

PCでは横長
スマホでは縦長

のように構図そのものを変更したい場合は、別画像を用意する方法もあります。

通常の記事画像なら、WordPressの標準機能を活用すれば十分です。

Google Discoverを意識するなら横幅1200px以上にする

Google Discoverからのアクセスを意識するなら、アイキャッチ画像を小さくしすぎてはいけません。

GoogleはDiscover向けの大きな画像について、

横幅1200px以上、30万画素を超える高解像度、16:9、max-image-preview:largeの利用を推奨しています。

たとえば1200×675pxなら、

1200×675＝810,000画素

となるため、30万画素を十分に上回ります。

1280×720pxなら、

1280×720＝921,600画素

です。

ページを軽くしたいからといって、アイキャッチを600px程度まで縮小するのはおすすめしません。

横幅1200px以上を確保し、WebPやAVIF、画像圧縮を利用して容量を小さくするのが適切です。

Discoverを意識するなら文字だらけの画像を避ける

ブログでは、アイキャッチいっぱいに記事タイトルを書くデザインもよく使われます。

しかしGoogle Discoverまで意識するなら、画像内の文字量には注意してください。

Googleは、og:imageや構造化データに指定する画像について、ページ内容を適切に表す高品質な画像を使用し、文字を含む画像を避けることを推奨しています。

Discoverを強く狙うなら、

画像は写真・イラストを主体にして、文字は必要最小限にする

のがおすすめです。

ブログ上では文字入りアイキャッチを使いながら、SNSや検索エンジン向けのog:imageだけ別画像に設定する方法もあります。

ファーストビュー画像をむやみに遅延読み込みしない

画像を遅延読み込みする「lazy loading」は、ページ表示を軽くするために有効です。

しかし、記事を開いた瞬間に見えるアイキャッチなど、ファーストビューの重要画像まで遅延読み込みすると、かえって表示速度の指標を悪化させる場合があります。

WordPressでは画像の読み込みを自動的に最適化しており、WordPress6.3以降ではLCP候補と判断した重要画像にfetchpriority="high"を付ける仕組みも導入されています。

そのためWordPress初心者なら、画像すべてに自分でloading="lazy"を追加する必要はありません。

基本的にはWordPressやテーマの標準機能に任せ、画像最適化プラグインなどで設定を変更する場合だけ注意してください。

画像の縦横サイズを正しく認識させる

画像読み込み時にページ内の文章やボタンがガクッと動くと、読者にとって使いにくいページになります。

画像の縦横サイズが事前に分かっていれば、ブラウザは画像が読み込まれる前から必要なスペースを確保できます。

通常のWordPress画像ブロックを使用していれば、WordPress側で画像情報が適切に出力されるため、初心者が毎回HTMLを編集する必要はありません。

しかし、独自HTMLや外部サービスから画像を読み込む場合は、画像の幅と高さが適切に指定されているか確認してください。

画像対策は「容量を小さくする」だけでなく、読み込み中もページが安定していることまで意識すると完成度が上がります。

画像ファイル名は内容が分かる名前にする

WordPressへ画像をアップロードするとき、

IMG_4587.webp

image001.webp

のような名前をそのまま使うのはおすすめしません。

Googleは、ファイル名も画像内容を判断するための手掛かりとして利用する場合があるため、簡潔で分かりやすい名前を推奨しています。

この記事の画像なら、

blog-image-size.webp

のような名前が分かりやすいですね。

ファイル名だけで検索順位が大きく上がるわけではありませんが、記事が100本、200本と増えたときにも、何の画像なのか判断しやすくなります。

SEOだけでなく管理のしやすさという意味でも、内容が分かるファイル名を付けてください。

alt属性は画像の内容を自然に説明する

alt属性は画像の内容を説明する代替テキストです。

Googleはaltテキスト、ページ内容、画像認識などを利用して画像の内容を理解しています。また、スクリーンリーダーを使用する人にとっても重要です。

たとえば、

「アイキャッチ・本文・図解のおすすめブログ画像サイズ一覧」

という画像なら、

「ブログ画像の用途別おすすめサイズ一覧」

といったalt属性で十分です。

一方、

「ブログ画像サイズおすすめWordPress画像SEOブログ画像」

のように検索キーワードを大量に詰め込むのは避けてください。

Googleもalt属性へのキーワードの詰め込みを避けるよう案内しています。

画像を見られない人へ、その画像が何を表しているのか説明する

という考え方で書けば自然なalt属性になります。

画像の近くに関連する文章を書く

画像SEOでは、画像だけを最適化すればよいわけではありません。

Googleは画像周辺の文章やページ内容などからも、画像が何を表しているのか判断します。

たとえば「ブログ画像のおすすめサイズ一覧」を掲載するなら、その前後でアイキャッチや本文画像のサイズについて説明してください。

画像と関係のない場所へ置くより、

関連する文章→画像→補足説明

という流れにしたほうが、読者にも検索エンジンにも内容が伝わりやすくなります。

画像は公開後にPCとスマホで確認する

画像をWordPressへアップロードしたら、最後に公開画面で確認してください。

編集画面できれいでも、実際の記事ではテーマによって画像幅やトリミングが変わる場合があります。

特に確認したいのは、スマートフォンで図解の文字が読めるか、アイキャッチの重要部分が切れていないか、画像がぼやけていないか、縦長すぎて読みづらくなっていないかです。

図解やスクリーンショットは、パソコンでは読みやすくてもスマートフォンでは文字が小さくなることがあります。

画像制作はスマホ表示まで確認して完了と考えてください。

初心者はこの画像設定から始めればOK

ここまで読んで「結局、何pxにすればいいの？」と感じた人は、次の設定を基準にしてください。

ただし、これらはすべてのブログに当てはまる絶対的な数字ではありません。

最終的には、

用途→テーマの表示比率→実際の表示幅→元画像サイズ→画像容量

という順番で決めるのが正解です。

このルールをブログ全体で統一すれば、記事を書くたびに画像サイズで迷わなくなります。

ブログ画像サイズの正解は：まとめ

ブログ画像サイズに絶対的な正解はありませんが、初心者ならアイキャッチは1200×630px、通常の本文画像は横幅1200px前後を基準にすると扱いやすくなります。

Google Discoverまで重視するなら、横幅1200px以上で16:9の1200×675pxや1280×720pxが有力です。

画像容量は100〜200KB程度を実務上の目標とし、画質を維持しながらWebPなどで軽量化しましょう。

さらに、WordPressテーマのアスペクト比、レスポンシブ画像、自動生成される画像サイズ、ファーストビュー画像の読み込み、ファイル名、alt属性、スマホ表示まで整えることで、読者の見やすさとSEOの両方を改善できます。

ブログ全体で画像ルールを統一しておけば、記事数が増えても画像制作や管理で迷わなくなります。

• Facebook
• Twitter
• はてブ
• LINE
• Pocket