2026年8月29日

WordPressでWebP画像を自動変換する方法・表示速度を改善する画像最適化

メディア・画像

はじめに

「PageSpeed Insightsで『次世代フォーマットでの画像の配信』と指摘される」——WebP形式はJPEGより約25〜35%、PNGより約26%ファイルサイズが小さく、ページ読み込み速度の大幅な改善につながります。WordPressでの設定方法を解説します。

症状・原因

WordPressはデフォルトでWebP変換に対応していません（ただしWordPress 5.8以降はWebPのアップロードと表示はサポート）。アップロード済みのJPEG・PNG画像をWebPに変換し、ブラウザが対応している場合に自動的にWebPを配信する仕組みが必要です。

解決手順

ステップ1：サーバーのWebP対応状況を確認する

# PHPのImagemagick/GDがWebPをサポートしているか確認
wp eval '
$editors = wp_image_editors();
foreach ($editors as $editor_class) {
    $editor = new $editor_class(null);
    echo $editor_class . ": ";
    echo $editor->supports_mime_type("image/webp") ? "WebP OK\n" : "WebP NG\n";
}'

# Imagickがサポートするフォーマット一覧
php -r "
\$im = new Imagick();
\$formats = \$im->queryFormats('WEBP*');
print_r(\$formats);
"

ステップ2：アップロード時にWebPを自動生成する

// 画像アップロード時にWebP版を生成（functions.php）
add_filter( 'wp_handle_upload', function( $upload ) {
    if ( ! in_array( $upload['type'], [ 'image/jpeg', 'image/png' ], true ) ) {
        return $upload;
    }

    $source = $upload['file'];
    $webp   = preg_replace( '/\.(jpe?g|png)$/i', '.webp', $source );

    if ( function_exists( 'imagewebp' ) ) {
        // GDを使ってWebP生成
        $image = $upload['type'] === 'image/jpeg'
            ? imagecreatefromjpeg( $source )
            : imagecreatefrompng( $source );

        imagewebp( $image, $webp, 85 ); // 品質85
        imagedestroy( $image );
    } elseif ( class_exists( 'Imagick' ) ) {
        // Imagickを使ってWebP生成
        $im = new Imagick( $source );
        $im->setImageFormat( 'webp' );
        $im->setImageCompressionQuality( 85 );
        $im->writeImage( $webp );
        $im->clear();
    }

    return $upload;
} );

ステップ3：NginxでWebPを自動配信する

WebPファイルが存在する場合にブラウザへ自動的にWebPを配信します。

# /etc/nginx/conf.d/webp.conf
map $http_accept $webp_suffix {
    default   "";
    "~*webp"  ".webp";
}

server {
    # ...

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

Apacheの場合（.htaccess）：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{REQUEST_FILENAME}.webp -f
    RewriteRule ^(.+)\.(jpe?g|png)$ $1.$2.webp [T=image/webp,E=accept:1]
</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

ステップ4：既存画像を一括WebP変換する

# ImageMagickで既存JPEGを一括変換
find wp-content/uploads -name "*.jpg" -o -name "*.jpeg" | \
  xargs -P 4 -I{} bash -c '
    webp="${1%.*}.webp"
    [ -f "$webp" ] || convert "$1" -quality 85 "$webp"
  ' _ {}

# cwebpコマンドで変換（Google製）
sudo apt install webp
find wp-content/uploads -name "*.jpg" | \
  xargs -I{} cwebp -q 85 {} -o {}.webp

# 変換済みWebPファイル数を確認
find wp-content/uploads -name "*.webp" | wc -l

ステップ5：WordPressの画像タグをpicture要素に変換する

// img要素をpicture要素にラップしてWebPとJPEGを使い分ける
add_filter( 'the_content', function( $content ) {
    return preg_replace_callback(
        '/<img([^>]+)src=["\']([^"\']+\.(jpe?g|png))["\']([^>]*)>/i',
        function( $matches ) {
            $webp_src = preg_replace( '/\.(jpe?g|png)$/i', '.webp', $matches[2] );
            $webp_path = ABSPATH . ltrim( wp_make_link_relative( $webp_src ), '/' );

            if ( ! file_exists( $webp_path ) ) {
                return $matches[0]; // WebPがなければそのまま
            }

            return '<picture>'
                . '<source srcset="' . esc_url( $webp_src ) . '" type="image/webp">'
                . $matches[0]
                . '</picture>';
        },
        $content
    );
} );

注意事項

WebP変換はサーバーのCPUリソースを消費します。大量の既存画像を変換する場合は、アクセスが少ない深夜帯にバッチ処理してください。
生成したWebPファイルはwp-content/uploads/に保存されますが、WordPressのメディアライブラリには登録されません。メディアライブラリ管理が必要な場合はプラグインの利用を検討してください。
Safariは14以降、iOSは14以降でWebPをサポートしています。古いブラウザ対策には要素でフォールバックを設定してください。

まとめ

WordPressのWebP対応は「サーバー確認→アップロード時自動生成→Nginx/Apache設定→既存画像一括変換→picture要素実装」の流れで完成します。PageSpeed Insightsのスコア向上と帯域節約を同時に実現できます。関連記事：WordPressで画像遅延読み込みを設定する方法、Core Web VitalsでLCPを改善する方法。

Post Views: 15