2026年5月20日

WordPressの画像をWebP形式に変換する方法

SEO・パフォーマンス

はじめに

WebPはJPEGより25〜35%、PNGより26%ファイルサイズが小さい次世代画像フォーマットです。WordPress 6.1以降はアップロード時にWebPを自動生成する機能が内蔵されており、適切な設定で読み込み速度を大幅に改善できます。

症状・原因

画像ファイルサイズが大きくページが重い
PageSpeed InsightsでWebP配信を推奨されている
Core Web Vitals（LCP）のスコアが低い
サーバーの帯域幅を画像が圧迫している

解決手順

ステップ1：WebP対応を確認する

# PHP GDのWebP対応を確認
php -r "var_dump(function_exists('imagewebp'));"
# bool(true) ならWebP生成が可能

# Imagickの確認
php -r "print_r(Imagick::queryFormats('WEBP'));"

// functions.php: サーバーのWebP対応状況を確認
function mytheme_check_webp_support(): bool {
    return function_exists('imagewebp') ||
           (class_exists('Imagick') && Imagick::queryFormats('WEBP'));
}

ステップ2：WordPress 6.1以降のネイティブWebP生成を有効化する

// functions.php

// アップロード時にWebPを自動生成（WP6.1+）
function mytheme_enable_webp_upload(array $transforms): array {
    // JPEGとPNGをWebPにも変換
    $transforms['image/jpeg'][] = ['image/webp'];
    $transforms['image/png'][]  = ['image/webp'];

    return $transforms;
}
add_filter('wp_upload_image_mime_transforms', 'mytheme_enable_webp_upload');

// WebPのMIMEタイプをアップロード許可リストに追加
function mytheme_allow_webp_upload(array $types): array {
    $types['webp'] = 'image/webp';
    return $types;
}
add_filter('upload_mimes', 'mytheme_allow_webp_upload');

ステップ3：既存画像をWebPに変換する（WP-CLI）

# WP-CLIで既存のサムネイルをWebP付きで再生成
wp media regenerate --yes

# または特定の添付ファイルのみ
wp media regenerate 123 456 789

# WebPに変換されたファイルを確認
find /var/www/html/wp-content/uploads/ -name "*.webp" | head -20

# SharpやcWebPで一括変換（WP外で実行）
find /var/www/html/wp-content/uploads/ -name "*.jpg" -exec \
    cwebp -q 85 {} -o {}.webp \;

ステップ4：.htaccessでWebPを自動配信する（Apache）

# .htaccess: WebP対応ブラウザには自動的にWebPを配信

<IfModule mod_rewrite.c>
    RewriteEngine On

    # ブラウザがWebPをサポートし、WebPファイルが存在する場合に配信
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
    RewriteCond %{REQUEST_FILENAME}\.webp -f
    RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,L]
</IfModule>

<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

ステップ5：Nginxでの自動WebP配信

# nginx.conf: WebP自動配信設定

map $http_accept $webp_suffix {
    default   "";
    "~*image/webp" ".webp";
}

server {
    location ~* \.(jpe?g|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
        expires 30d;
        add_header Cache-Control "public, immutable";
    }
}

ステップ6：タグでWebPをフォールバック付きで配信する

// functions.php: picture要素でWebPを配信するヘルパー
function mytheme_picture_webp(int $attachment_id, string $size = 'large', string $class = ''): string {
    $img_url  = wp_get_attachment_image_url($attachment_id, $size);
    $img_meta = wp_get_attachment_metadata($attachment_id);

    if (!$img_url || !$img_meta) {
        return wp_get_attachment_image($attachment_id, $size);
    }

    $webp_url = $img_url . '.webp';
    $alt      = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
    $class    = esc_attr($class);
    $alt      = esc_attr($alt);
    $img_url  = esc_url($img_url);
    $webp_url = esc_url($webp_url);

    return sprintf(
        '<picture>
            <source srcset="%s" type="image/webp">
            <img src="%s" alt="%s" class="%s" loading="lazy" decoding="async">
        </picture>',
        $webp_url,
        $img_url,
        $alt,
        $class
    );
}

注意事項

wp_upload_image_mime_transforms はWordPress 6.1以降のフィルターです。それ以前のバージョンではプラグイン（WebP Express、Imagify等）を使用してください
.htaccess のWebP配信はWebPファイルが実際に存在する場合のみ動作します。変換なしで設定だけ追加しても効果はありません
CDNを使用している場合、Vary: Accept ヘッダーをCDNがキャッシュするよう設定が必要です

まとめ

WordPress 6.1以降は wp_upload_image_mime_transforms フィルターでアップロード時にWebPを自動生成できます。既存画像は wp media regenerate で再変換し、.htaccess（Apache）や map ディレクティブ（Nginx）でWebP対応ブラウザに自動配信します。非対応ブラウザにはタグでJPEG/PNGにフォールバックします。

Post Views: 16