WordPressでレスポンシブ画像のsizes属性を正しく設定する手順

WordPress は画像に srcset と sizes を自動で付けますが、既定の sizes は「画像がそれ自身の幅で表示される」前提で作られるため、テーマの本文カラムより大きな画像では、必要以上に大きなファイルが読み込まれがちです。sizes をテーマの実際のレイアウトに合わせて書き直すと、見た目を変えずに画像の転送量を抑えられます。この記事では、ブラウザが画像を選ぶ仕組み、今どの画像が読み込まれているかの確かめ方、本文・幅広ブロック・アイキャッチそれぞれで sizes を設定する方法、WordPress 6.7 以降の sizes="auto" との関係を説明します。

srcset と sizes の役割

srcset は「用意してある画像ファイルとその幅」の一覧、sizes は「その画像がページ上で何ピクセルの幅で表示されるか」の宣言です。

<img src="photo-1024x683.jpg"
     srcset="photo-300x200.jpg 300w, photo-768x512.jpg 768w, photo-1024x683.jpg 1024w, photo-1536x1024.jpg 1536w"
     sizes="(max-width: 752px) calc(100vw - 32px), 720px"
     width="1024" height="683" alt="">

ブラウザは CSS を適用してレイアウトを計算する前に、画像のダウンロードを始めます。そのため、表示幅を sizes で先に教えてもらい、その幅に画面のピクセル密度（devicePixelRatio）を掛けた値に見合う候補を srcset から選びます。上の例では、画面幅が 752px 以下なら「画面幅から 32px を引いた幅」、それより広ければ「720px」で表示されると宣言しています。

sizes の書き方の決まりは次のとおりです。

• カンマ区切りで「メディア条件 幅」を並べ、左から順に評価して最初に一致したものが使われる
• 最後の項目は条件なしの幅にする（どの条件にも当てはまらないときの値）
• 幅には px、vw、calc() などが使える。% は使えない

sizes はあくまで宣言なので、実際の CSS と食い違っていても表示は崩れません。食い違いは「大きすぎる画像を読む」「小さすぎて粗く見える」という形で表れます。

WordPress が出力する既定の sizes

WordPress は 4.4 から、メディアライブラリの画像に srcset と sizes を自動で付けています。既定の sizes は次の形です（W は出力する画像の幅）。

(max-width: Wpx) 100vw, Wpx

たとえば幅 1024px の「大」サイズを、最大 720px の本文カラムに置いたとします。既定の sizes は「画面が 1024px より広ければ 1024px で表示される」と宣言するため、パソコンの高解像度画面（ピクセル密度 2）では 1024×2=2048px に見合う候補が選ばれます。実際の表示は 720px なので、720×2=1440px 程度の候補で足りるはずです。これが、sizes を見直す価値がある典型的なケースです。

実際に読み込まれている画像を確かめる

変更の前後で、どのファイルが選ばれているかを確かめます。対象のページを開き、ブラウザの開発者ツールのコンソールで次を実行します。

console.table( [ ...document.querySelectorAll( 'img[srcset]' ) ].map( ( img ) => ( {
  file: img.currentSrc.split( '/' ).pop(),
  natural: img.naturalWidth,
  shown: img.clientWidth,
  dpr: window.devicePixelRatio,
  sizes: img.sizes,
} ) ) );

natural（読み込んだ画像の幅）が shown × dpr より大幅に大きい画像が、見直しの対象です。

確認するときの注意が2つあります。ブラウザは一度大きな画像をキャッシュすると、小さな候補で足りる場面でもそれを使い回すことがあるため、開発者ツールでキャッシュを無効にするか、シークレットウィンドウで確認してください。また、遅延読み込みの画像はスクロールして表示されるまで読み込まれません。

PageSpeed Insights（Lighthouse）でも、表示サイズに対して大きすぎる画像が指摘されます。監査項目の名前や分類は Lighthouse のバージョンによって変わり、新しい版では「画像配信の改善」のような項目にまとめられていることがあります（2026年10月現在）。

テーマのレイアウトから sizes を決める

正しい sizes は、テーマの CSS から決まります。開発者ツールで画面幅を変えながら、画像の表示幅を確認して書き出します。

• スマホ幅: 本文の左右に 16px ずつ余白があるなら「100vw から 32px を引いた幅」
• 本文カラムの最大幅: 720px で止まるなら、その幅に余白を足した 752px が切り替わりの境目
• それより広い画面: 720px

これを sizes にすると (max-width: 752px) calc(100vw - 32px), 720px になります。ブロックテーマなら、本文と幅広の幅は theme.json の settings.layout.contentSize と settings.layout.wideSize に書かれているので、その値が手がかりになります。

本文の画像の sizes を変える

本文中の画像の sizes は、wp_calculate_image_sizes フィルターで書き換えられます。テーマ本体を直接編集するとアップデートで消えるため、子テーマの functions.php か mu-plugin に書きます。

add_filter( 'wp_calculate_image_sizes', 'wpdr_content_image_sizes', 10, 2 );

function wpdr_content_image_sizes( $sizes, $size ) {
	if ( is_admin() || ! is_singular() ) {
		return $sizes;
	}

	// $size には画像サイズ名か [幅, 高さ] の配列が渡される。
	$width = is_array( $size ) ? (int) $size[0] : 0;

	// 本文カラム（最大 720px、スマホでは左右 16px の余白）より広い画像だけ書き換える。
	if ( $width > 720 ) {
		return '(max-width: 752px) calc(100vw - 32px), 720px';
	}

	return $sizes;
}

720px 以下の画像は、それ自身の幅で表示されるので既定の値のままで問題ありません。数値はテーマに合わせて変えてください。

このフィルターは、テンプレートで出力するアイキャッチなどにも適用されます。個別の値を渡した画像には影響しません（後述）が、シングルページで全幅のアイキャッチを出しているテーマでは、そちらにも sizes を明示しておきます。

幅広・全幅にしたブロックの画像

画像ブロックを「幅広」や「全幅」にした場合、表示幅は本文カラムより広くなります。上のフィルターでは配置がわからないため、render_block_core/image フィルターで画像ブロックの配置を見て、img に sizes を書き込みます。WP_HTML_Tag_Processor は WordPress 6.2 以降で使えます。

add_filter( 'render_block_core/image', 'wpdr_aligned_image_sizes', 10, 2 );

function wpdr_aligned_image_sizes( $block_content, $block ) {
	$align = isset( $block['attrs']['align'] ) ? $block['attrs']['align'] : '';

	if ( 'full' === $align ) {
		$sizes = '100vw';
	} elseif ( 'wide' === $align ) {
		// 幅広の最大幅が 1200px、スマホでは左右 16px の余白がある場合の例。
		$sizes = '(max-width: 1232px) calc(100vw - 32px), 1200px';
	} else {
		return $block_content;
	}

	$processor = new WP_HTML_Tag_Processor( $block_content );
	if ( $processor->next_tag( 'img' ) ) {
		$processor->set_attribute( 'sizes', $sizes );
	}

	return $processor->get_updated_html();
}

ブロックの描画は、本文の画像に srcset と sizes を付ける処理（wp_filter_content_tags()）より先に行われます。WordPress は img にすでに sizes があればそれを残して srcset だけを足すため、ここで書き込んだ値が使われます。処理の順序は将来のバージョンで変わる可能性もあるので、適用後は出力された HTML で確認してください。

テンプレートで出力する画像

アイキャッチや記事一覧のサムネイルは、テンプレートで出力するときに sizes を直接渡せます。the_post_thumbnail() と wp_get_attachment_image() は、属性の配列で sizes を受け取ると、計算した値の代わりにそれを使います。

// シングルページの全幅アイキャッチ
the_post_thumbnail( 'full', array( 'sizes' => '100vw' ) );

// 一覧: スマホ1列、タブレット2列、パソコン3列（最大 360px）のグリッド
the_post_thumbnail(
	'medium_large',
	array( 'sizes' => '(max-width: 599px) calc(100vw - 32px), (max-width: 1023px) calc(50vw - 24px), 360px' )
);

一覧のように同じ画像が小さく表示される場所ほど、既定の sizes との差が大きくなります。グリッドの列数と余白は、テーマの CSS のブレークポイントから拾ってください。

WordPress 6.7 以降の sizes=”auto”

WordPress 6.7 からは、遅延読み込み（loading="lazy"）で幅の属性がある画像の sizes の先頭に auto が付くようになりました。対応するブラウザは、遅延読み込みの画像についてはレイアウト後の実際の表示幅から候補を選び、auto に続く値は対応していないブラウザ向けの予備になります。

ここで大事なのは、ファーストビューの画像は遅延読み込みされないため auto が付かず、自分で書いた sizes がそのまま使われる点です。ページの表示速度の指標である LCP の対象になりやすいのはこうした画像なので、auto があっても sizes を正しく書く意味は残ります。

auto の付加を止めたい場合は、wp_img_tag_add_auto_sizes フィルターで false を返します（このフィルターは WordPress 6.7.1 で追加されました）。

add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );

ブラウザの対応状況は変わっていくため、最新の状況は MDN などで確認してください。

画像サイズの候補も見直す

sizes が正しくても、ちょうどよい幅の候補が srcset になければ効果は限られます。WordPress が srcset に入れるのは、元画像と縦横比が同じ登録サイズで、既定では幅 2048px までです（上限は max_srcset_image_width フィルターで変えられます）。切り抜き（クロップ）して縦横比が変わるサイズは候補に入りません。

本文カラム 720px のテーマなら、ピクセル密度 2 の画面向けに 1440px 前後の候補があると無駄が少なくなります。add_image_size() でサイズを追加した場合、既存の画像には自動では作られないため、WP-CLI の wp media regenerate などで作り直します。画像が多いサイトでは時間とディスク容量を使うので、バックアップを取ったうえで、アクセスの少ない時間帯に実行してください。

まとめ

• sizes は表示幅の宣言で、ブラウザはそれとピクセル密度から srcset の候補を選ぶ
• WordPress の既定値は「画像自身の幅で表示される」前提なので、本文カラムより大きな画像では大きすぎるファイルが選ばれやすい
• currentSrc と表示幅をコンソールで比べ、キャッシュを無効にして確認する
• 本文は wp_calculate_image_sizes、幅広・全幅ブロックは render_block_core/image、テンプレートの画像は the_post_thumbnail() や wp_get_attachment_image() の sizes で設定する
• 6.7 以降の sizes="auto" は遅延読み込みの画像だけに付くので、ファーストビューの画像の sizes は引き続き重要
• コードは子テーマか mu-plugin に書き、適用後は出力された HTML と読み込まれた画像で確かめる

• WordPressの画像をWebPに変換する方法
• WordPressの画像の遅延読み込みをカスタマイズする方法