ブログの画像サイズは何px？本文は枠の幅から決め、アイキャッチはDiscover推奨の1200px・16:9が目安

ブログの画像サイズは、「何ピクセルが正解」と1つに決まっているものではありません。公式に推奨の数字があるのはアイキャッチで、本文の画像は自分のブログの本文の幅から計算で決める、と分けて考えると迷わなくなります。

画像は横幅何ピクセルがおすすめ、比率は16:9がよい、と書いてあるサイトごとに数字が違って、どれに合わせればいいか分からない。スマホで自分の記事を開くと、画像が小さすぎたり、読み込み中に文字がずれたりする。そんな個人ブログの方に向けて書いています。

読み終えたときには、本文の画像とアイキャッチをそれぞれ何ピクセルにするか、比率はどこまでそろえればよいか、スマホで何を見れば確かめられるかが分かるはずです。Googleとweb.dev、WordPressの説明は、2026年10月9日に公式ページの原文で確かめました。この記事で扱うのは画像の寸法(縦横のピクセル数)と比率だけで、ファイルの重さ(圧縮)の話は別の記事に分けています。

Googleの公式ドキュメントに「ブログの画像は何px」という一律の数字は見当たらない

Googleの「Google 画像検索 SEO ベスト プラクティス」には、画像を何ピクセルにするかの指定はありませんでした。書かれているのは、画面の大きさに応じて同じ画像の複数の大きさを出し分ける方法(srcset属性など)と、「常に src 属性を使用して代替 URL を指定することをおすすめします。」という書き方の注意です。

数字が書かれていたのは、次の3か所です。どれも「何に使う画像か」が決まっていて、ブログの画像すべてに当てはまる数字ではありません。

どれにも、この大きさにすると検索順位が上がるとは書かれていません。Discoverと構造化データの数字は、Googleがその画像を大きく見せたり選んだりするときの推奨です。本文の画像の数字は、ぼやけず、必要以上に大きくもないための計算です。以下、本文の画像とアイキャッチを分けて見ていきます。

本文の画像の横幅は、表示される枠の幅から決める

最適な大きさは「枠の幅 × 画面の画素比」

web.devの「Image performance」は、画像について最初にできる最適化として、正しい大きさで表示することを挙げています。ここでの大きさは、ファイルの重さではなく縦横のピクセル数のことです。説明を要約すると次のとおりです(日本語版はAI翻訳と注記されているので、英語版から私が要約しました)。

• ほかの条件を考えなければ、500×500ピクセルの枠に表示する画像は500×500ピクセルが最適。1,000ピクセルの画像は、必要な大きさの2倍になる
• ただし、iPhone 4以降の多くのiPhoneのように、1ピクセルを2個の点で表示する画面がある(この比を画素比、英語でdevice pixel ratioと呼ぶ)。画素比が2の画面で500ピクセルの枠に出すなら1,000ピクセル、画素比が3なら1,500ピクセルが最適

つまり、本文の画像の横幅は「自分のブログで、画像が何ピクセルの枠に表示されるか」で決まります。ほかのサイトに書いてある「横幅〇〇ピクセルがおすすめ」は、そのサイトの本文の幅を前提にした数字なので、自分のブログにそのまま当てはまるとは限りません。

私は、本文の枠の幅の2倍程度を上限にしています(web.devの数字ではなく、画素比2の画面に合わせた私の目安です)。根拠にしているのは、同じページの注記 "In most cases, the human eye is unable to benefit from a DPR of 3"(私の訳:たいていの場合、人の目は画素比3の恩恵を受けられない)です。たとえば本文の枠が800ピクセルなら、800 × 2 = 1,600 ピクセルです。スマホは画素比が3の端末もありますが、本文の枠がパソコンより狭くなります。仮にスマホでの枠が400ピクセルなら、400 × 3 = 1,200 ピクセルで、パソコンに合わせた1,600ピクセルの画像で足ります。

自分のブログの本文の枠を確かめる

本文の枠の幅は、使っているテーマやブログサービスで決まっています。WordPressの「Image Size and Quality」は、本文の枠が600ピクセルのテーマに800ピクセルの画像を入れると、サイドバーやレイアウトを押し出して崩してしまう例を挙げ、 "Images within that 600 pixel width need to be restricted to that maximum width in order to protect the layout of your page."(私の訳:その600ピクセルの枠の中の画像は、ページのレイアウトを守るため、最大でもその幅に収める必要がある)と書いています。まず枠の幅を知ることが出発点です。

WordPressでは、管理画面の「設定」→「メディア」に、サムネイル・中・大の3つのサイズの欄があります。WordPressの「メディア設定画面」の説明は「以下の各サイズが、投稿本文に挿入するときに使う画像の最大サイズをピクセル単位で決定します。」です。テーマの説明に本文の幅が書かれていれば、「大サイズ」をそれに合わせておくと、本文に入れる画像の上限がそろいます。WordPress以外のブログサービスは、各サービスのヘルプで本文の幅や推奨の画像サイズを確かめてください。私はこの記事のために各サービスの推奨サイズを確かめられていないので、ここには数字を挙げません。

スマホで撮った写真は、そのままだと大きすぎる

スマホで撮った写真は、横幅が数千ピクセルあることが多く、本文の枠よりずっと大きくなります。WordPressは、アップロードした画像の幅か高さが一定の値を超えると、自動で縮小します。開発者向けの説明「big_image_size_threshold」によると、その値は既定で2560ピクセルで、 "If the original image width or height is above the threshold, it will be scaled down."(私の訳:元の画像の幅か高さがこの値を超えると、縮小される)とあります。WordPress 5.3.0から入った仕組みです。

2,560ピクセルは、800ピクセルの枠の2倍(1,600ピクセル)より大きいので、本文の枠に合わせるなら、アップロードの前に自分で縮めておく余地があります。縮めることでどれだけ軽くなるか、形式や画質をどこまで詰めるかは、ブログの画像圧縮はSEOに効く？どこまでやるかは最初の1枚で決めるに書きました。

比率は、本文の画像は自由、アイキャッチは先に決めておく

アイキャッチは、Discoverを考えるなら幅1,200ピクセル以上の16:9

記事を代表する画像(アイキャッチ)には、Googleの文書に数字があります。Googleの「Google Discover とウェブサイト」は、Discoverに表示される可能性を高める方法の1つとして「次の仕様を満たす画像を使用することをおすすめします。」と書き、次の項目を挙げています(英語版でも同じ数字を確認しました)。

• 幅 1,200 ピクセル以上
• 合計 30 万ピクセル以上の高解像度（たとえば、1,280x720 ピクセルで 16:9 の画像は合計 921,600 ピクセルのため、この仕様を満たしています）
• アスペクト比: 16:9
• …
• max-image-preview:large の設定または AMP を使用して有効にしたもの

— Google 検索セントラル「Google Discover とウェブサイト」(日本語版の最終更新2026年3月11日)

(省略したのは切り抜きの注意の段落です)

最後の項目は画像の寸法ではなく、ページ側の設定です。Discoverにブログが出る条件と、この設定の確かめ方はGoogle Discoverにブログは出る？レポートが無い理由に書きました。

記事の構造化データ(記事の情報をGoogleに伝える決まった書き方)に入れる画像については、Googleの「記事（Article、NewsArticle、BlogPosting）の構造化データ」に「適切な画像が選択されるように、アスペクト比が 16x9、4x3、1x1 の高解像度画像（幅と高さをかけて 50,000 ピクセル以上になる画像）を指定してください。」とあります。英語版は "For best results, we recommend providing multiple high-resolution images" で始まり、16x9・4x3・1x1 の画像を複数用意することをすすめる言い方です。日本語版の「指定してください」より弱いので、この記事では推奨として扱います。

数字を比べると、幅1,200ピクセル以上の16:9(たとえば1,200×675ピクセル)で作っておけば、Discoverの推奨と、構造化データの16x9・50,000ピクセル以上の両方を満たします。検索結果にどの画像が出るかはGoogleが検索語ごとに選ぶので、アイキャッチを整えても必ず表示されるわけではありません。その選ばれ方はアイキャッチはSEOに効く？検索結果の画像はGoogleが選ぶにまとめています。

SNSのカードは、別の話として分ける

アイキャッチは、XなどのSNSで記事が共有されたときのカードにも使われることがあります。カードに出す画像はOGP(og:image)というタグで指定するもので、Discoverや構造化データとは別の仕組みです。Xのカードの推奨サイズは、Xの公式の説明を私が確かめられていないので、この記事では数字を挙げません。カードに画像が出ないときの確かめ方はOGPとは？Xでブログのアイキャッチが表示されないときの確かめ方に書きました。

本文の画像の比率に、公式の決まりは見当たらない

本文に貼るスクリーンショットや写真の比率について、私が確かめた公式ページに決まった数字はありませんでした(極端に細長い画像を避けるよう書かれているのは、検索結果に出す画像についてです。下の FAQ で引きます)。内容に合わせて、横長でも正方形でも構いません。私は、同じ記事の中で並ぶ図はできるだけ同じ比率にそろえています。読む側がスクロールしたときに、画像の高さが揃っているほうが目が迷わないと考えているからです(これは私の考えで、公式の推奨ではありません)。

1つだけ、そろえるべき場面があります。同じ画像の大きさ違いを用意して、画面に応じて出し分けるとき(srcset属性)です。web.devの「Optimize Cumulative Layout Shift」は、 "To ensure <img> width and height attributes can be set, each image should use the same aspect ratio."(私の訳:画像のタグに幅と高さを書けるように、それぞれの画像は同じ比率にする)と書いています。WordPressのメディア設定では、中サイズと大サイズは「最大の幅と最大の高さ」を決める欄で、「実寸法にトリミングする」選択があるのはサムネイルだけです。

幅と高さ(width・height)を書いて、読み込み中のずれを防ぐ

比率やピクセル数より先に確かめたいのが、画像のタグに幅と高さが書かれているかです。書かれていないと、ブラウザは画像を読み込み終わるまで画像の高さが分からず、読み込んだ瞬間に下の文字が押し下げられます。読んでいた行が急に動く、あの現象です。このずれは、Core Web VitalsのCLS(Cumulative Layout Shift)という指標で測られます。

web.devの「Optimize Cumulative Layout Shift」は、こう書いています(日本語版はAI翻訳と注記されているので、英語版から引き、訳は私が付けました)。

Always include width and height size attributes on your images and video elements. Alternatively, reserve the required space with CSS aspect-ratio or similar.
— web.dev「Optimize Cumulative Layout Shift」(最終更新2025年2月7日)。私の訳:画像と動画の要素には、必ず width と height の属性を入れる。または、CSS の aspect-ratio などで必要な場所を空けておく

HTMLで書くと、次のような形です。

<img src="photo-1600.jpg" width="1600" height="900" alt="（画像の説明）">

width と height には、画像の実際のピクセル数を書きます。表示の大きさはCSSで枠の幅に合わせて縮められても、ブラウザは2つの数字から比率を計算して、読み込む前に場所を空けておけます。編集画面から画像を入れたときにこの2つが自動で入るかどうかは、使っているサービスやテーマ、プラグインによって変わります。自分の記事のページのソースを開いて、<img の中に width= と height= があるかを見るのが確実です。

スマホで見たときに確かめる3つ

寸法を決めたら、実際にスマホで記事を開いて確かめます。私が見ているのは次の3つです。

確認1:読み込み中に、文字が下へずれないか

公開した記事をスマホのブラウザで開き、画像が出てくるときに本文が押し下げられないかを見ます。ずれるなら、上の節の width と height が入っていない可能性があります。通信が速いと一瞬で終わって気づきにくいので、画像の多い記事で、ページを開いた直後から目で追うのがおすすめです。

確認2:画像の中の文字が、スマホで読めるか

スクリーンショットや図に文字が入っているなら、スマホの幅に縮んだときに読めるかを確かめます。画像を何ピクセルで作っても、スマホでは本文の幅まで縮めて表示されるので、横長の画像ほど中の文字は小さくなります。読めないなら、ピクセル数を増やすより、切り抜いて必要な部分だけにするか、縦に近い比率で作り直すほうが効きます(これは私の経験からの考えです)。

確認3:PageSpeed Insightsで、幅と高さの無い画像が出ていないか

自分の目で見るだけでは分からないずれもあります。web.devの「Optimize Cumulative Layout Shift」によると、PageSpeed InsightsのLighthouseには、幅と高さが無いためにCLSを起こしている画像についての情報を出す監査があります( "two audits to provide more information on images causing CLS due to missing width and height")。記事のURLを入れてモバイルの結果を出し、CLSに関する項目で画像が挙がっていないかを見ます。

画像のalt属性(画像の説明文)も、寸法とあわせて見直したくなるところです。書き方とファイル名の付け方は画像SEOのalt属性の書き方とファイル名、効果は普段見ている数字に出ませんに分けました。

このブログの画像の寸法

実例として、このブログ(rewrite-radar.com)の画像を2026年10月9日に数えました。記事の本文の枠は最大800ピクセルで、ブログの画像フォルダのPNGは287枚、寸法は2種類だけでした。

• 本文の図:1,536×1,024ピクセル(3:2)が119枚。800ピクセルの枠の2倍(1,600ピクセル)を少し下回る幅で、上で書いた私の目安の中に収まっています。タグには幅と高さを入れています。図は最小の幅を720ピクセルにしていて、スマホでは縮めずに横スクロールで読む形にしています(図の中の文字を読めるようにするためです)
• アイキャッチ:1,200×630ピクセルが168枚。SNSのカードにもそのまま使うため、この大きさで作ると決めています。幅1,200ピクセル以上と合計30万ピクセル以上(1,200 × 630 = 756,000 ピクセル)は満たしますが、比率は約1.9:1で、Discoverの推奨の16:9とは合っていません。この画像は記事の構造化データの画像にも使っていて、16x9・4x3・1x1 のどれにも当てはまりません(50,000ピクセル以上は満たします)

アイキャッチの比率は、SNSのカードとDiscoverのどちらに合わせるかの選択で、このブログは今のところSNSのカードを優先しています。16:9に作り直すかどうかは、Discoverからの表示がSearch Consoleに出るようになってから考えるつもりです。数字の推奨はあっても、全部を同時に満たせないことはある、という例として載せておきます。

よくある質問

画像を大きくすると、検索順位は上がりますか

私が確かめたGoogleの公式ページ(画像検索のベストプラクティス、Discover、記事の構造化データ)には、画像のピクセル数で検索順位が上がるとは書かれていませんでした。幅1,200ピクセル以上という数字は、Discoverで表示される可能性を高めるための画像の推奨です。本文の画像を必要以上に大きくすると、ファイルが重くなるだけです。

スマホ用に、小さい画像を別に用意したほうがいいですか

自分でHTMLを書いているなら、srcset属性で大きさ違いを出し分ける方法があり、Googleの画像のベストプラクティスにも例が載っています。そのときも src 属性は残します。WordPressは、アップロードした画像から、メディア設定のサムネイル・中・大の大きさの画像を作ります。それが画面に応じて出し分けられているかは、ページのソースで <img に srcset= があるかで分かります。

縦長の画像を使ってもいいですか

本文の画像の比率について、確かめた公式ページに決まった数字はありませんでした。ただ、Googleの「Google 画像検索 SEO ベスト プラクティス」には「極端なアスペクト比の画像（狭すぎる画像や広すぎる画像など）は使用しないでください。」とあるので、極端に細長い画像は避けます。また、スマホでは縦長の画像が画面の大半を占めて、前後の文から離れてしまいます。比率の数字が書かれているのは、記事を代表する画像(Discoverの16:9、構造化データの16x9・4x3・1x1)のほうなので、アイキャッチには縦長を避けるのが無難です。

過去の記事の画像も、全部作り直すべきですか

私は全部はやり直していません。寸法が枠の幅より極端に大きい画像や、幅と高さが入っていない画像から直します。どの記事から手を付けるかは、検索に表示されている記事から選ぶと、直したあとに変化を確かめやすくなります。

まとめ

• 「ブログの画像は何ピクセル」という一律の数字は、確かめたGoogleの公式ページには無い。この大きさで検索順位が上がるとも書かれていない
• 本文の画像の横幅は、表示される枠の幅 × 画面の画素比で決まる(web.dev)。私の目安は本文の枠の2倍程度まで。まず自分のブログの本文の枠の幅を確かめる
• 数字の推奨があるのはアイキャッチ。Discoverは幅1,200ピクセル以上・合計30万ピクセル以上・16:9、記事の構造化データは16x9・4x3・1x1で50,000ピクセル以上
• 本文の画像の比率は内容に合わせてよい。比率より先に、画像のタグに width と height を書いて、読み込み中のずれ(CLS)を防ぐ
• スマホで記事を開き、ずれが無いか・画像の中の文字が読めるかを見て、PageSpeed Insightsで幅と高さの無い画像が出ていないかを確かめる

画像を直す記事を選ぶときは、すでに検索に表示されている記事と、まだ表示がほとんど無い記事を分けて考えると、手を付ける順番が決めやすくなります。

その切り分けのために私が作ったツールがあるので、ここから宣伝として書きます。

サーチコンソールのエクスポートをZIPのまま置くだけで、掲載順位が4.0〜20.5位のページを拾い、表示回数100回以上は通常判定、30〜99回は参考判定、30回未満は本文中心の監査に分けて、同じ区分の中ではCTR機会差の多い順に並べます。画像を直す記事も、この並びの上から選べば、直したあとの表示回数やクリック数の変化を追いやすくなります。 判定と候補3記事のCTR機会差の確認、そのうち1記事分の診断カードまでは無料です。有料は2,980円(税込)の買い切りで、無料の1件を除いた3記事分の診断カードが対象です。3記事分が揃うとき(判定に出た候補が4件以上のとき)だけご案内します。生成の利用期限は購入から7日間で、月額課金や自動更新はありません。ログインも不要です。 CSVファイルそのものはブラウザの外に出ませんが、診断カードを出すときは選んだ1ページぶんの数値(URL・キーワード・順位・表示回数・CTR)を、タイトル取得を押したときは最大10件のURLを送ります。

⚠️ このツールは、画像の寸法や比率、width と height の有無、CLSの値、Discoverでの表示を確かめません。診断カードは本文の img の alt と src を読みますが、画像そのものは開きません。判定に使う数値は、Google検索のページごとの平均掲載順位・表示回数・CTRです。この記事の確認は自分の画面で行ってください。並べ替えるだけで、順位やクリック数が上がることを約束するものではなく、掲載順位4.0〜20.5位に入るページが無いブログでは、候補が0件になることがあります。