本文へスキップ
画像とメディア

WordPressアイキャッチ画像サイズ1200×630+調べ方

WordPress のアイキャッチ画像サイズは 1200×630px がリンクプレビュー向き。ただしテーマで切り抜かれることも。テーマの表示サイズを調べ、その2倍の幅でアップロードしましょう。

公開 更新

結論: テーマのサイズがまだ分からないなら、1200 x 630 ピクセル(約 1.91:1)を使いましょう。Facebook が推奨するリンクプレビューのサイズで、SEO プラグインは通常アイキャッチ画像をシェア画像として使います。

投稿ページそのものでは、重要なのはテーマが表示するサイズです。WordPress はアップロードした画像を複数のサイズで保存し、そのうちどれを表示するかはテーマが選びます。クラシックテーマは set_post_thumbnail_size() や add_image_size() で、ブロックテーマはアイキャッチ画像ブロックでそれを設定します。テーマが 16:9 や正方形で切り抜く場合、1200 x 630 の画像は左右の端が一部切れることがあります。まずテーマのサイズを調べ(方法は下で4つ紹介します)、少なくともその大きさの画像をアップロードしてください。高密度ディスプレイでくっきり見せるなら、幅は約2倍が理想です。

ある画像から WordPress がどのサイズを作るかを確認するには、その画像を WordPress 画像サイズツールに入れてみてください。

画像が表示される場所別:使うべきサイズ

画像が表示される場所アップロードするサイズ備考
自分の投稿(テーマのサイズがまだ不明)1200 x 630、よりくっきりさせるなら 2400 x 1260テーマのサイズを調べている間、リンクプレビューにもそのまま使える
自分の投稿(テーマのサイズが判明)テーマのアイキャッチ画像の幅の約2倍、同じ縦横比でWordPress はアップロード画像から小さいコピーを作るだけで、大きいコピーは作らない
Facebook のリンクプレビュー1200 x 630 以上(約 1.91:1)。1200 x 628 もほぼ同じ形Facebook の共有ガイダンスより
Google Discover幅 1200px 以上、16:9(例:1200 x 675)Google の Discover ガイドラインより

WordPress の画像サイズ一覧

アップロードした画像には、登録済みのサイズごとにリサイズされたコピーが作られます。以下は WordPress コアが登録するサイズで、初期値は Theme Handbook とコア関数リファレンスに基づいています。

サイズ名初期値設定 > メディアで変更できるか備考
thumbnail150 x 150、切り抜きはい「サムネイルを実寸法にトリミングする」チェックボックスあり
medium最大 300 x 300はい縦横比を保って縮小
medium_large幅 768、高さ制限なしいいえ主に srcset で使用
large最大 1024 x 1024はい縦横比を保って縮小
1536x1536最大 1536 x 1536いいえ高密度ディスプレイ向けに WordPress 5.3 で追加
2048x2048最大 2048 x 2048いいえ高密度ディスプレイ向けに WordPress 5.3 で追加
post-thumbnailテーマが設定いいえテーマが set_post_thumbnail_size() を呼んだ場合のみ存在
fullアップロードした元画像いいえ非常に大きな画像は先に縮小される(後述)

「最大」とは、縦横比を保ったまま画像をその枠の中に収めるという意味です。2000 x 1000 の写真は large では 1024 x 1024 ではなく 1024 x 512 になります。

テーマやプラグインは add_image_size() でさらにサイズを追加することがよくあります。たとえば WooCommerce は独自の商品画像サイズを追加します。詳しくは WooCommerce 商品画像サイズのガイドをご覧ください。

大きな画像にはもう1つルールがあります。WordPress 5.3 以降、幅か高さが 2560 ピクセルを超える画像は縮小され、その縮小版が利用できる最大サイズとして使われます。このしきい値は big_image_size_threshold フィルターで決まり、初期値は 2560 です。ファイル名に -scaled が付いていて、これを無効にすべきか知りたい場合は WordPress で scaled 画像を無効にする方法をお読みください。

アイキャッチ画像のサイズは実際どこで決まるのか

アイキャッチ画像とは、投稿エディターのアイキャッチ画像パネルで設定した画像のことです。訪問者に何が見えるかは、テーマがそれをどう出力するかで決まります。

クラシックテーマ

クラシックテーマは functions.php でアイキャッチ画像を有効にし、サイズを登録します。

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

set_post_thumbnail_size() は post-thumbnail という名前のサイズを登録します。3つ目の引数が切り抜きを制御します。false(初期値)なら、WordPress は画像を 1200 x 675 の中に収まるよう縮小します。true なら、中央から正確に 1200 x 675 に切り抜くため、16:9 の枠からはみ出た部分は失われます。array( 'center', 'top' ) のような配列を渡して、残す部分を選ぶこともできます。

多くのテーマは、テンプレートごとに名前付きのサイズを追加で登録しています。

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

そしてテンプレートが名前でどれかを選びます。

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

名前を指定せずに呼ぶと、the_post_thumbnail() は post-thumbnail を使います。つまりクラシックテーマでの実際のアイキャッチ画像サイズはテンプレートで指定された名前のサイズであり、ブログのアーカイブと個別投稿ページで違うサイズが使われることもあります。

ブロックテーマ

このサイトの無料テーマを含むブロックテーマは、アイキャッチ画像ブロックでアイキャッチ画像を出力します。コアブロックのリファレンスには、sizeSlug(どの登録済みサイズを読み込むか)、aspectRatio、width、height、scale などの設定が載っています。

そのため、確認する場所が変わります。外観 > エディターを開き、「個別投稿」テンプレートを編集して、アイキャッチ画像ブロックを選択してください。サイドバーに、読み込む画像サイズと縦横比の設定の有無が表示されます。縦横比はブラウザー上で CSS によって適用されるので、ファイルはそのままで、見える枠だけが変わります。ブロックが 16:9 の枠を指定していて画像が正方形なら、一部が隠れます。アーカイブやホームのテンプレートは個別投稿テンプレートと違う設定のこともあるので、それぞれ確認しましょう。

使っているテーマのアイキャッチ画像サイズを調べる方法

次の順番で試してください。最初に答えが出た方法で十分です。

  1. テーマのドキュメントを確認する。 よくできたテーマは推奨するアイキャッチ画像サイズを明記しています。書かれていればそれを使いましょう。

  2. WP-CLI で登録済みサイズを一覧表示する。 コマンドラインが使えるなら、wp media image-size で登録済みの全サイズを幅、高さ、切り抜き設定、比率と一緒に表示できます。

    wp media image-size
  3. テーマのファイルを検索する。 クラシックテーマなら、functions.php(とそこから読み込まれるファイル)で set_post_thumbnail_size と add_image_size を探し、single.php やテンプレートパーツで the_post_thumbnail() に渡されている名前を確認します。ブロックテーマなら、上で説明したようにサイトエディターでアイキャッチ画像ブロックを確認します。

  4. 公開中の投稿を調べる。 アイキャッチ画像を右クリックして「検証」を選び、src のファイル名を読みます。WordPress はリサイズしたコピーのファイル名に寸法を付けるので、my-photo-1200x675.jpg ならテーマが 1200 x 675 のコピーを読み込んだと分かります。狭い画面ではブラウザーが小さいコピーを選ぶことがあるので、srcset も見てください。ファイル名に寸法がなければ、フルサイズのファイルが使われています。

目標のサイズが分かったら、まとめてアップロードする前に、サンプル画像を画像サイズツールに通して、各コピーがどう仕上がるか確認しましょう。

アップロードするサイズの決め方

テーマのサイズが分かったら、仕上がりを左右するのは次の4つです。

  • 幅。 少なくともテーマが表示する幅でアップロードします。スマホやノートパソコンの高密度ディスプレイでくっきり見せるには、その約2倍を目指してください。幅 1200px の枠なら 2400px です。WordPress はアップロード画像から小さいコピーを作るだけで大きいコピーは作らないため、元画像が小さすぎることがアップロード後に画像がぼやける最もよくある原因です。
  • 縦横比。 テーマの切り抜きと同じ比率にします。16:9 で切り抜くなら 16:9 の画像を用意し、ハードクロップで頭や文字が切れないよう被写体を中央寄りに配置しましょう。
  • ファイルサイズ。 幅 2400px の写真を適度な品質の JPEG で保存すると、たいてい数百キロバイトです。6000px のカメラ画像をそのまま上げても手間が増えるだけです。WordPress は 2560px を超える画像をどのみち縮小するので、余分なピクセルが訪問者に届くことはありません。
  • ファイル形式。 サーバーの画像ライブラリが対応していれば、WordPress はバージョン 5.8 以降 WebP、6.5 以降 AVIF のアップロードを受け付けます。どちらも同程度の画質なら、たいてい JPEG より小さいファイルになります。

SNS シェア用の画像は別の話

誰かが投稿を Facebook や LinkedIn などで共有すると、プレビューには og:image タグの画像が使われます。SEO プラグインは通常このタグにアイキャッチ画像を入れます。Facebook の共有に関するドキュメントは、1200 x 630 ピクセル以上で、できるだけ 1.91:1 に近い比率の画像を推奨しています。

1200 x 628 が推奨されているのを見かけることもあります。こちらはほぼ正確に 1.91:1 で、1200 x 630 は約 1.90:1 です。高さの差はわずか2ピクセルなので、どちらでも問題ありません。

テーマの表示サイズも 1.91:1 に近ければ、1200 x 630(または 2400 x 1260)の画像1枚で両方をまかなえます。テーマが 16:9 や正方形で切り抜く場合は、大事な要素を左右の端から離して配置するか、SEO プラグインで別の SNS 用画像を設定してください。

Google Discover には独自の画像の推奨事項があります。Google の Discover ガイドラインは、幅 1200px 以上、総ピクセル数 300,000 超、1200 x 675 のような 16:9 の比率の画像を推奨しています。大きな画像を表示させるには max-image-preview:large の robots 設定も必要ですが、WordPress はバージョン 5.7 からこれを初期設定で出力しています。ただし、サイトで「検索エンジンがサイトをインデックスしないようにする」を有効にしている場合は除きます。

アイキャッチ画像のサイズを変更する方法

どこで変更するかは、サイズの種類と使っているテーマによって決まります。

コアのサイズ(thumbnail、medium、large)。 設定 > メディアで幅と高さを変更します。各項目についてはメディア設定画面のドキュメントに説明があり、サムネイルの切り抜きチェックボックスもそこに含まれます。

WordPress の Media Settings 画面。サムネイル、中、大の画像サイズの幅と高さの欄と、サムネイルの切り抜きチェックボックスがある
初期値の設定 > メディアです。150 x 150(切り抜き)、300 x 300、1024 x 1024(WordPress Playground 上の WordPress 7.1.4)。

クラシックテーマのテーマ側サイズ。 親テーマは編集しないでください。テーマを更新すると変更が上書きされます。新しい値は子テーマの functions.php に追加します。同じ名前でサイズを登録し直すと置き換わります。子テーマの設定は親テーマより後に実行される必要があります。

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

優先度 11 にすることで、初期値の優先度 10 でフックしている親テーマより後に実行されます。親テーマのコードを確認し、もっと後の優先度を使っていれば合わせて調整してください。

ブロックテーマ。 サイトエディターのテンプレートで、アイキャッチ画像ブロックの画像サイズと縦横比を変更します。コードは不要で、そのテンプレートを使うすべての投稿に反映されます。

画像1枚だけなら、コード不要。 1枚の画像で切り抜き後に残す部分を選ぶには、メディア > ライブラリから画像を開き、「画像を編集」をクリックします。テーマの比率に合わせて切り抜くか(切り抜きツールでは 16:9 などの縦横比を指定できます)、拡大縮小して保存します。WordPress はその変更をその画像のすべてのサイズに適用し、元のファイルも残すので、あとから「元の画像を復元」で元に戻せます。

既存のサムネイルを再生成する

サイズの変更は新しくアップロードした画像にしか適用されません。メディアライブラリにある画像は、作り直すまで古いコピーのままです。それを行うのが wp media regenerate コマンドです。

wp media regenerate --yes

WP-CLI のドキュメントにある便利なオプション:

  • --image_size=hero-wide はそのサイズだけを作り直します。複数のサイズなら、このフラグを繰り返します。
  • --only-missing はまだ存在しないサイズだけを作り、既存のファイルには触れません。新しいサイズを追加した後はこちらのほうが速く済みます。
  • --skip-delete は古いサムネイルファイルを残します。ほかのサイト、ニュースレター、フィードがそれらのファイルに直接リンクしている場合に使います。

コマンドラインが使えない場合は、WordPress.org プラグインディレクトリの Regenerate Thumbnails プラグインで、管理画面から同じことができます。再生成は大量のファイルを書き換えるので、ライブラリが大きい場合は先にバックアップを取りましょう。

よくある間違い

  • 1200 x 630 で終わりにしてしまう。出発点としては良く、リンクプレビューにも合いますが、テーマが 16:9 や正方形で切り抜くなら画像の一部が切れます。まとめてアップロードする前に、テーマのサイズを確認してください。
  • 「元画像を残すため」に自動生成されるサイズを無効にする。テーマに小さいコピーがなければ、どの画面でもフルサイズのファイルを読み込むことになり、スマホでページが遅くなります。リサイズされたコピーはそれを防ぐためにあります。
  • 画像サイズのコードを編集して、再生成を省く。コードは機能しますが、新しいアップロードにしか効きません。多くの人がサイズ変更が「効かなかった」と思うのはこのためです。
  • 親テーマでサイズを変更する。次のテーマ更新で消えます。子テーマかサイトエディターを使ってください。

サイズと比率を合わせて再生成しても画像の見え方がおかしい場合は、ブラウザーが読み込んだファイル名と、画像サイズツールが示す WordPress が作るはずのサイズを比べてください。食い違っているなら、WordPress と訪問者の間にある最適化プラグインや CDN の画像リサイズ機能が独自のバージョンを配信していることがよくあります。

FAQ

よくある質問

WordPress のアイキャッチ画像に最適なサイズは?

テーマのサイズがまだ分からないなら、まずは 1200 x 630 ピクセルにしましょう。Facebook が推奨するリンクプレビューのサイズで、SEO プラグインは通常アイキャッチ画像をシェア画像として使います。そのうえで最適なのは、テーマが表示するサイズです。その登録済みサイズをその縦横比で覆える画像をアップロードし、高密度ディスプレイ向けには幅を2倍にするのが理想です。

WordPress のアイキャッチ画像がぼやけるのはなぜですか?

多くの場合、元のファイルがテーマの表示サイズより小さいことが原因です。WordPress はアップロード画像から小さいコピーを作るだけで、拡大はしません。そのため幅 600px のファイルを幅 1200px の枠に引き伸ばすと甘く見えます。より大きな元画像をアップロードし、サムネイルを再生成してテーマのサイズを作り直してください。

WordPress のアイキャッチ画像は 1200x630 が正しいサイズですか?

それは Facebook がリンクプレビュー画像に推奨しているサイズで、1200 x 630 ピクセル以上、比率は約 1.91:1 です。テーマのサイズが分からないときの初期値としても適しています。ただし投稿ページそのものでは、テーマが別の登録済みサイズを表示している場合があります。そのサイズが 16:9 や正方形など、より幅の狭い比率で切り抜かれる設定なら、1200 x 630 の画像は左右の端が一部切れます。

WordPress がアイキャッチ画像を切り抜いてしまうのはなぜですか?

テーマがアイキャッチ画像のサイズを切り抜きありで登録しているためです。set_post_thumbnail_size や add_image_size の crop 引数が true の場合、WordPress は画像を中央から正確な幅と高さに切り抜きます。初期値の false の場合は、縦横比を保ったまま縮小します。

WordPress で画像サイズを変更したら、サムネイルの再生成は必要ですか?

必要です。新しいサイズや変更したサイズは、変更後にアップロードした画像にしか適用されません。既存の画像は作り直すまで古いファイルのままです。WP-CLI の wp media regenerate --yes か、管理画面から使える再生成プラグインで作り直してください。ほかのサイトが古いサムネイルファイルに直接リンクしている場合は --skip-delete を使います。