WordPressのレスポンシブ画像を最適化する方法：srcset・sizes・遅延読み込み・WebP

WordPress は画像をアップロードすると、設定されたサイズの縮小画像をいくつか作ります。テーマが wp_get_attachment_image() やブロックエディターの画像ブロックで画像を出すと、srcset と sizes が自動で付き、ブラウザーが画面に合った大きさの画像を選んで読み込みます。

それでも「スマホで大きな画像が読み込まれる」「PageSpeed Insights で画像のサイズを指摘される」場合は、縮小画像のサイズが合っていないか、sizes が実際の表示幅とずれていることが多いです。この記事の内容は、2026年11月時点の WordPress 6.9 のソースコード（wp-includes/media.php）で確かめています。

WordPress が自動で付ける属性

wp_get_attachment_image() や the_post_thumbnail()、本文の画像ブロックで出力した <img> には、次の属性が自動で付きます。

つまり、テーマで <img src="…"> を手書きせず、WordPress の関数で画像を出すだけで、ほとんどの最適化は済みます。

縮小画像のサイズを決める

標準の3サイズは「設定」→「メディア」で変える

「サムネイルのサイズ」「中サイズ」「大サイズ」は、管理画面の「設定」→「メディア」で変更できます。テーマの functions.php で update_option() を毎回呼んで書き換える方法は、サイト管理者の設定を上書きしてしまうので使いません。

テーマ独自のサイズを追加する

テーマのレイアウトに合わせたサイズは add_image_size() で追加します。

<?php
add_action( 'after_setup_theme', function () {
    // アイキャッチ画像を使えるようにする
    add_theme_support( 'post-thumbnails' );

    // 名前, 幅, 高さ, 切り抜くか
    add_image_size( 'hero', 1920, 800, true ); // 1920×800 に切り抜く
    add_image_size( 'card', 600, 400, true );  // 600×400 に切り抜く
} );

// 画像ブロックなどの「解像度」の選択肢に追加する
add_filter( 'image_size_names_choose', function ( $sizes ) {
    return array_merge( $sizes, array(
        'hero' => 'ヒーロー画像（1920×800）',
        'card' => 'カード画像（600×400）',
    ) );
} );

srcset に入るのは、元の画像と縦横比が同じ縮小画像だけです。切り抜き（true）で縦横比を変えたサイズは、別の縦横比の画像として扱われます。たとえば card（3:2）を表示すると、srcset には 3:2 の縮小画像だけが並びます。モバイル用に小さい版も欲しい場合は、同じ縦横比で小さいサイズ（card-small を 300×200 など）も追加します。

サイズの追加の詳しい手順は add_image_size の記事 を参照してください。

追加したサイズは、それ以降にアップロードした画像にだけ作られる

既存の画像に新しいサイズを作るには、縮小画像を作り直します。

• プラグインを使う場合は、wordpress.org で配布されている「Regenerate Thumbnails」で「ツール」から一括で作り直せます。
• WP-CLI が使えるサーバーなら、次のコマンドで作り直せます。

# 足りないサイズだけ作る
wp media regenerate --only-missing

画像の数が多いと時間がかかり、ディスクの容量も増えるので、バックアップを取ってから実行してください。

テーマで画像を出力する

<?php
// アイキャッチ画像を card サイズで出す（srcset・sizes・loading などは自動）
echo wp_get_attachment_image(
    get_post_thumbnail_id(),
    'card',
    false,
    array(
        'class' => 'card-image',
        // 画面幅 768px 以下では画面幅いっぱい、それより広い画面では 3 列で約 360px
        'sizes' => '(max-width: 768px) 100vw, 360px',
    )
);

sizes は「その画像が画面上で何 px の幅で表示されるか」をブラウザーに伝える値です。初期値は画像の幅をもとにしているため、カードのように画像の幅より狭く表示する場合は、上のようにレイアウトに合わせて書くと、必要以上に大きな画像が選ばれにくくなります。

ファーストビューの大きな画像

ページを開いてすぐ見えるヒーロー画像は、PageSpeed Insights の LCP（最大コンテンツの描画）の対象になりやすい画像です。WordPress は最初の大きな画像に自動で fetchpriority="high" を付け、遅延読み込みも外しますが、テーマの作りによっては判定が外れることがあります。その場合は明示します。

<?php
echo wp_get_attachment_image(
    get_post_thumbnail_id(),
    'hero',
    false,
    array(
        'loading'       => false,  // loading 属性を付けない（遅延読み込みしない）
        'fetchpriority' => 'high', // 優先して読み込む
        'sizes'         => '100vw',
    )
);

loading を false にすると属性そのものが出力されません。loading="lazy" と fetchpriority="high" を同じ画像に付けると、WordPress は警告を出します。

sizes をサイト全体で調整する

本文の画像の sizes をまとめて変えるには wp_calculate_image_sizes フィルターを使います。本文の幅が最大 760px のテーマの例です。

<?php
add_filter( 'wp_calculate_image_sizes', function ( $sizes, $size ) {
    // $size は array( 幅, 高さ )
    $width = (int) $size[0];

    // 本文の幅より大きい画像は、本文の幅で表示される
    if ( $width >= 760 ) {
        return '(max-width: 800px) calc(100vw - 2rem), 760px';
    }

    return $sizes; // 小さい画像は初期値のまま
}, 10, 2 );

WordPress 6.7 以降は、遅延読み込みの画像には sizes の先頭に auto が付き、対応するブラウザーは実際の表示幅で画像を選びます。そのため、このフィルターの効果が大きいのは、遅延読み込みしないファーストビューの画像や、auto に対応していないブラウザーです。

WebP で縮小画像を作る

WordPress は 5.8 から WebP のアップロードに対応しているので、upload_mimes に WebP を追加するコードは不要です。

JPEG をアップロードしたときに、縮小画像を WebP で作らせるには image_editor_output_format フィルター（WordPress 5.8 以降）を使います。

<?php
add_filter( 'image_editor_output_format', function ( $formats ) {
    $formats['image/jpeg'] = 'image/webp'; // JPEG の縮小画像を WebP で保存する
    return $formats;
} );

• 変わるのは、この設定を入れたあとにアップロードした画像から作られる画像（縮小画像など）です。アップロードした元のファイルと、既存の画像は変わりません。
• サーバーの GD か Imagick が WebP に対応している必要があります。「ツール」→「サイトヘルス」の「情報」タブにあるメディアの項目で、使っている画像処理ライブラリと対応している形式を確かめられます。
• WebP にすると、画像ファイルを直接ほかで使う場合（メールマガジンなど）に表示できない環境が残ることがあります。

ネット上には wp_upload_image_mime_transforms というフィルターで JPEG と WebP の両方を作る例がありますが、これは WordPress 6.1 の開発版にあった機能で、正式版には入りませんでした。現在の WordPress にはありません。既存の画像もまとめて WebP にしたい場合は、EWWW Image Optimizer のような画像最適化プラグインを検討してください。

確かめる

1. 公開ページで画像を右クリックし、「検証」で <img> に srcset・sizes・loading が付いているか見ます。
2. 開発者ツールの「Network」（ネットワーク）タブで「Img」に絞り、スマホの幅に切り替えて再読み込みし、小さいファイルが読み込まれているか確かめます。
3. PageSpeed Insights で、LCP の画像に遅延読み込みがかかっていないか確かめます。

まとめ

• 画像は <img> を手書きせず、wp_get_attachment_image() などで出すと、srcset・sizes・loading・fetchpriority・decoding が自動で付きます。
• テーマ独自のサイズは add_image_size() で追加し、既存の画像には縮小画像の作り直しが必要です。srcset には同じ縦横比の画像だけが入ります。
• 表示幅が画像の幅と違う場所では sizes をレイアウトに合わせて書きます。
• 縮小画像を WebP にするには image_editor_output_format フィルターを使います。