2026年5月20日

WordPressのレスポンシブ画像を最適化する方法

テーマ・デザイン

はじめに

WordPressは画像アップロード時に複数サイズを自動生成し、srcset 属性で適切なサイズを配信します。しかしカスタムサイズの登録や sizes 属性の最適化をしないと、無駄に大きな画像が読み込まれることがあります。

症状・原因

モバイルでも大きな画像が読み込まれて遅い
Lighthouseで「適切なサイズの画像を使用してください」と指摘される
WebP形式で配信できていない
画像の遅延読み込み（lazy load）が機能していない

解決手順

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

// functions.php
function mytheme_image_sizes(): void {
    // デフォルトサイズを調整
    update_option('thumbnail_size_w', 300);
    update_option('thumbnail_size_h', 300);
    update_option('medium_size_w', 600);
    update_option('medium_size_h', 0); // 高さは比率を維持
    update_option('large_size_w', 1024);
    update_option('large_size_h', 0);

    // カスタムサイズを追加
    add_image_size('hero', 1920, 800, true);    // クロップあり
    add_image_size('card', 600, 400, true);     // クロップあり
    add_image_size('thumbnail-square', 300, 300, true);
}
add_action('after_setup_theme', 'mytheme_image_sizes');

// 管理画面のメディア選択に追加
function mytheme_image_size_names(array $sizes): array {
    return array_merge($sizes, [
        'hero' => 'ヒーロー画像 (1920×800)',
        'card' => 'カード画像 (600×400)',
    ]);
}
add_filter('image_size_names_choose', 'mytheme_image_size_names');

ステップ2：wp_get_attachment_imageで出力する

// 自動的にsrcset・sizes・loading属性が付与される
echo wp_get_attachment_image(
    get_post_thumbnail_id(),
    'large',
    false,
    [
        'class'   => 'hero-image',
        'sizes'   => '(max-width: 768px) 100vw, (max-width: 1200px) 80vw, 1200px',
        'loading' => 'lazy',     // WordPress 5.5+ でデフォルトlazy
        'decoding' => 'async',   // 非同期デコード
    ]
);

// ファーストビュー画像はeager（遅延させない）
echo wp_get_attachment_image(
    get_post_thumbnail_id(),
    'hero',
    false,
    [
        'loading'  => 'eager',
        'fetchpriority' => 'high', // LCP画像として優先
        'decoding' => 'async',
    ]
);

ステップ3：WebP配信を有効にする（WordPress 5.8+）

// functions.php
// WordPress 5.8以降はWebPアップロードをデフォルトサポート
// 既存画像をWebPに変換するフィルター
function mytheme_enable_webp_upload(array $mime_types): array {
    $mime_types['webp'] = 'image/webp';
    return $mime_types;
}
add_filter('upload_mimes', 'mytheme_enable_webp_upload');

// JPEG・PNG→WebP変換（WordPress 6.1+）
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;
});

ステップ4：pictureタグでWebP+フォールバックを実装する

// テンプレート内で使用
function mytheme_responsive_picture(int $attachment_id, string $size = 'large', array $attrs = []): string {
    $webp_src  = mytheme_get_webp_url($attachment_id, $size);
    $img_attrs = array_merge(['loading' => 'lazy', 'decoding' => 'async'], $attrs);
    $img_tag   = wp_get_attachment_image($attachment_id, $size, false, $img_attrs);

    if (!$webp_src) {
        return $img_tag;
    }

    $srcset = wp_get_attachment_image_srcset($attachment_id, $size);

    return sprintf(
        '<picture><source type="image/webp" srcset="%s"><source srcset="%s">%s</picture>',
        esc_attr($webp_src),
        esc_attr($srcset),
        $img_tag
    );
}

ステップ5：sizes属性をカスタマイズする

// functions.php: デフォルトのsizes属性を変更
function mytheme_content_image_sizes_attr(string $sizes, array $size): string {
    // コンテンツ幅に合わせたsizes
    return '(max-width: 768px) calc(100vw - 2rem), (max-width: 1200px) calc(100vw - 4rem), 1160px';
}
add_filter('wp_calculate_image_sizes', 'mytheme_content_image_sizes_attr', 10, 2);

注意事項

add_image_size で登録したサイズは、新規アップロード画像にのみ自動生成されます。既存画像には「Regenerate Thumbnails」プラグインで再生成が必要です
LCP（Largest Contentful Paint）に該当するファーストビューの画像は loading="eager" + fetchpriority="high" を設定してください
WebP変換はサーバーの GD または Imagick が必要です。phpinfo() でサポート状況を確認してください

まとめ

add_image_size でカスタムサイズを登録し、wp_get_attachment_image で srcset・sizes・loading を適切に設定します。ファーストビューは loading="eager" fetchpriority="high"、それ以外は loading="lazy" が推奨です。WordPress 6.1以降はWebP自動変換が利用できます。

Post Views: 17