2026年5月26日

WordPressの画像サイズを管理する方法

メディア・画像

はじめに

「投稿サムネイルに適切なサイズの画像を使いたい」「WordPressが自動生成する不要な画像サイズを削除してサーバー容量を節約したい」「Retina（高DPI）ディスプレイに対応したい」——画像サイズの管理はパフォーマンスとビジュアル品質の両立に欠かせません。

症状・原因

WordPressは画像アップロード時にサムネイル（150×150）・中サイズ（300×300）・大サイズ（1024×1024）の3種類を自動生成します。テーマが独自サイズを追加すると大量の中間ファイルが生成され、ストレージを圧迫します。add_image_size()で必要なサイズのみ定義することで最適化できます。

解決手順

ステップ1：カスタム画像サイズを追加する

// functions.php: カスタム画像サイズを登録
add_action( 'after_setup_theme', function() {
    // サムネイル機能を有効化
    add_theme_support( 'post-thumbnails' );

    // カスタムサイズを追加
    // add_image_size( 名前, 幅, 高さ, クロップ )
    add_image_size( 'hero',        1920, 600,  true );  // ハードクロップ（比率固定）
    add_image_size( 'card',        400,  250,  true );  // カードサムネイル
    add_image_size( 'square',      400,  400,  true );  // 正方形
    add_image_size( 'portrait',    400,  600,  true );  // 縦長
    add_image_size( 'wide',        800,  0,    false ); // 幅800px・高さ自動（比率維持）
    add_image_size( 'og-image',    1200, 630,  true );  // OGP用

    // Retina対応（2x）
    add_image_size( 'card-2x',     800,  500,  true );
} );

// functions.php: メディア選択ダイアログにカスタムサイズ名を表示
add_filter( 'image_size_names_choose', function( array $sizes ): array {
    return array_merge( $sizes, [
        'hero'      => 'ヒーロー画像',
        'card'      => 'カードサムネイル',
        'square'    => '正方形',
        'portrait'  => '縦長',
        'wide'      => 'ワイド',
        'og-image'  => 'OGP画像',
    ] );
} );

ステップ2：デフォルト画像サイズを変更・無効化する

// functions.php: デフォルトサイズを変更（0を指定で生成しない）
add_action( 'after_setup_theme', function() {
    // サムネイルサイズを変更
    set_post_thumbnail_size( 400, 250, true );

    // 中サイズを無効化
    update_option( 'medium_size_w', 0 );
    update_option( 'medium_size_h', 0 );

    // 大サイズを無効化
    update_option( 'large_size_w', 0 );
    update_option( 'large_size_h', 0 );

    // 中サイズ（large）を無効化
    update_option( 'medium_large_size_w', 0 );
    update_option( 'medium_large_size_h', 0 );
} );

// 特定のサイズ生成をフィルターで無効化
add_filter( 'intermediate_image_sizes_advanced', function( array $sizes ): array {
    // 不要なサイズを削除
    unset( $sizes['medium'] );
    unset( $sizes['medium_large'] );
    unset( $sizes['large'] );

    return $sizes;
} );

ステップ3：画像サイズをテンプレートで使用する

// テンプレートファイル: カスタムサイズでサムネイルを表示
if ( has_post_thumbnail() ) {
    // カードサイズで表示
    the_post_thumbnail( 'card', [
        'class' => 'card__thumbnail',
        'alt'   => get_the_title(),
    ] );
}

// srcset でRetina対応（2x画像を自動的にsrcsetに含める）
// WordPressは自動的に srcset と sizes 属性を追加する
// the_post_thumbnail() の出力例:
// <img src="card.jpg" srcset="card.jpg 400w, card-2x.jpg 800w" sizes="...">

// 任意のIDの画像を特定サイズで取得
$image_url = wp_get_attachment_image_url( $attachment_id, 'og-image' );
$image_src = wp_get_attachment_image_src( $attachment_id, 'og-image' );
// $image_src = [ url, width, height, is_intermediate ]

// 画像タグとして出力
echo wp_get_attachment_image( $attachment_id, 'card', false, [
    'class'   => 'my-image',
    'loading' => 'lazy',
] );

ステップ4：既存画像を新しいサイズで再生成する

# WP-CLI: 全画像を再生成（新しいサイズを追加した後に実行）
wp media regenerate --yes

# 特定のサイズのみ再生成
wp media regenerate --image-size=card --yes

# 特定の投稿IDの画像のみ再生成
wp media regenerate 123 456 789

# 進捗を確認しながら再生成
wp media regenerate --yes --progress

# 不要なサイズのファイルを削除（プラグイン「Regenerate Thumbnails」も利用可）
# ※ WP-CLIには不要サイズ削除コマンドはないので手動またはプラグインで対応

// プログラムから再生成（大量処理の場合はWP-CLIを推奨）
$attachments = get_posts( [
    'post_type'      => 'attachment',
    'post_mime_type' => 'image',
    'posts_per_page' => -1,
    'fields'         => 'ids',
] );

foreach ( $attachments as $attachment_id ) {
    $file = get_attached_file( $attachment_id );
    if ( $file && file_exists( $file ) ) {
        wp_update_attachment_metadata(
            $attachment_id,
            wp_generate_attachment_metadata( $attachment_id, $file )
        );
    }
}

ステップ5：big_image_size_thresholdで大きな画像を制御する

// functions.php: 元画像の最大サイズを制限（WordPress 5.3以降）
// デフォルトは2560px。これを超える画像はリサイズされる
add_filter( 'big_image_size_threshold', function( int $threshold ): int {
    return 2560; // 2560px以上の画像を 2560px にリサイズして保存
    // 0 または false で無効化（元画像をそのまま保存）
} );

// 画像のアップロード時に WebP に自動変換（WordPress 6.5以降）
// 設定 → メディア → 「アップロード画像をWebPに変換」で設定可能

// functions.php: WebP変換を強制する（6.5以降）
add_filter( 'wp_upload_image_mime_transforms', function( array $transforms ): array {
    // jpeg/png を webp に変換
    $transforms['image/jpeg'] = [ 'image/webp' ];
    $transforms['image/png']  = [ 'image/webp' ];
    return $transforms;
} );

注意事項

画像サイズを追加・変更した後はwp media regenerateで既存画像を再生成してください。新しいサイズは新規アップロード分にしか適用されません。
add_image_size()のハードクロップ（第4引数true）は中心を基準にクロップします。顔認識などで特定の位置を基準にしたい場合は[ 'center', 'top' ]のような配列で指定できます。
update_option()でデフォルトサイズを0にしても、管理画面の設定（設定→メディア）から再設定されると元に戻ります。intermediate_image_sizes_advancedフィルターで制御する方が確実です。

まとめ

画像サイズの管理は「after_setup_themeでadd_image_size()によりテーマ専用サイズを定義→intermediate_image_sizes_advancedで不要なデフォルトサイズを除外→image_size_names_chooseでメディアダイアログに名前を表示→the_post_thumbnail()/wp_get_attachment_image()でテンプレートに適用→wp media regenerateで既存画像を再生成」の流れで整備します。関連記事：WordPressのメディアアップロードエラーを解決する方法、WordPressの表示速度を改善する方法。

Post Views: 35