画像を自動圧縮＆WebP化する最適設定｜高速化とSEOに効く最新手法

この記事では、WordPressでアップロードされた画像を自動で圧縮し、さらにWebP形式に変換する方法を解説します。プラグインを使う方法と、functions.phpにコードを追加して自動化する方法の両方を紹介します。

1 実装のポイント

• アップロード時に自動で画像を圧縮
• WebP形式を生成してブラウザ対応
• テーマごとにCSS調整でWebPを表示
• プラグイン不要でPHPコードだけでも可能

2 functions.php にコードを追加

// ------------------------------
// 画像アップロード時に自動圧縮＆WebP変換
// ------------------------------
function convert_image_to_webp($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file = $upload_dir['basedir'] . '/' . $metadata['file'];

    $info = getimagesize($file);
    $mime = $info['mime'];

    switch ($mime) {
        case 'image/jpeg':
            $image = imagecreatefromjpeg($file);
            break;
        case 'image/png':
            $image = imagecreatefrompng($file);
            break;
        default:
            return $metadata; // JPEG/PNG以外は処理しない
    }

    $webp_file = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file);
    imagewebp($image, $webp_file, 80); // 画質80でWebP生成
    imagedestroy($image);

    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'convert_image_to_webp', 10, 2);

3 確認方法

3.1 メディアライブラリで確認

1. WordPress管理画面 → メディア → ライブラリ にアクセス
2. 新しくアップロードした画像を選択
3. 「ファイルのURL」を確認
4. サーバー上のディレクトリを直接見る場合は、wp-content/uploads/年/月/ 内に .webp ファイルが生成されているか確認

ポイント：

• PHPコードで生成している場合、元画像と同じ名前で拡張子だけ .webp に変換されているはずです
• 例：image.jpg → image.webp

3.2 ブラウザで確認

1. 投稿や固定ページに画像を挿入
2. 開発者ツール（Chrome: F12 → Network タブ）で画像リクエストを確認
3. WebPが読み込まれていれば MIMEタイプが image/webp で表示されます

ポイント：

• そのまま <img> タグで挿入している場合、WebPを直接呼び出していないと生成はされてもブラウザには表示されません
• <picture> タグや srcset でWebPを呼ぶ設定にすると、WebPが自動で表示されます

3.3 サーバーで直接確認（FTP/SFTPやファイルマネージャー）

1. wp-content/uploads/年/月/ フォルダにアクセス
2. 画像の横に .webp が生成されているか確認
3. サイズを比較すると圧縮効果も確認可能

（例）

4 代用プラグイン

• EWWW Image Optimizer：自動圧縮＋WebP変換
• ShortPixel Image Optimizer：高圧縮＋WebP/AVIF変換対応
• Imagify：簡単に圧縮＋WebP生成可能

5 まとめ

• アップロード時に自動圧縮＆WebP変換でサイト軽量化
• PHPコードで実装すればプラグイン不要
• 既存画像はプラグインで一括最適化可能