2026年5月20日

WordPressの画像を自動圧縮する設定方法

SEO・パフォーマンス

はじめに

画像の圧縮は最もコストパフォーマンスの高いパフォーマンス改善です。WordPressはGDまたはImagickを使って画像を処理しており、フィルターフックでアップロード時の圧縮品質を細かく制御できます。

症状・原因

アップロードした画像のファイルサイズが大きい
PageSpeed Insightsで「適切なサイズの画像」を推奨されている
スマートフォンから高解像度写真をアップロードされてサーバー容量を圧迫
サムネイルがオリジナルと同程度の品質で保存されている

解決手順

ステップ1：デフォルトのJPEG品質を変更する

// functions.php

// JPEGの品質を変更（デフォルト82）
// 75〜85が品質とファイルサイズのバランスが良い
add_filter('jpeg_quality', fn(): int => 80);

// wp_editor_set_quality: エディター処理時の品質（リサイズ・回転時）
add_filter('wp_editor_set_quality', fn(): int => 80);

ステップ2：Imagickで高品質な圧縮を行う

// functions.php

// Imagickが利用可能な場合に詳細な圧縮設定を適用
function mytheme_imagick_compress(WP_Image_Editor_Imagick $editor): WP_Image_Editor_Imagick {
    $imagick = $editor->get_image(); // Imagickインスタンスを取得

    if (!$imagick instanceof Imagick) {
        return $editor;
    }

    // 不要なメタデータを削除（Exif・ICCプロファイル等）
    $imagick->stripImage();

    // プログレッシブJPEGにする（ブラウザが上から順に表示）
    $imagick->setInterlaceScheme(Imagick::INTERLACE_PLANE);

    // 色空間をsRGBに統一（CMYKからの変換も対応）
    if ($imagick->getColorspace() !== Imagick::COLORSPACE_SRGB) {
        $imagick->transformImageColorspace(Imagick::COLORSPACE_SRGB);
    }

    return $editor;
}
// ※ WP_Image_Editor_Imagick にはフックが少ないため、
// wp_generate_attachment_metadata 後に処理することが多い

ステップ3：アップロード時に最大サイズを制限する

// functions.php

// 巨大画像を最大サイズにリサイズしてから保存
function mytheme_limit_image_size(array $metadata, int $attachment_id): array {
    $max_width  = 2560;
    $max_height = 1440;

    $file = get_attached_file($attachment_id);
    if (!$file) {
        return $metadata;
    }

    $image_size = getimagesize($file);
    if (!$image_size) {
        return $metadata;
    }

    [$orig_width, $orig_height] = $image_size;

    // 最大サイズを超えている場合のみリサイズ
    if ($orig_width <= $max_width && $orig_height <= $max_height) {
        return $metadata;
    }

    $editor = wp_get_image_editor($file);
    if (is_wp_error($editor)) {
        return $metadata;
    }

    $editor->resize($max_width, $max_height, false); // false = アスペクト比を維持
    $editor->save($file);

    // メタデータを更新
    $new_size = $editor->get_size();
    $metadata['width']  = $new_size['width'];
    $metadata['height'] = $new_size['height'];

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

ステップ4：PNGをJPEGに変換してサイズを削減する

// functions.php

// 写真系のPNGを自動的にJPEGに変換
function mytheme_png_to_jpeg_on_upload(array $upload): array {
    if ($upload['type'] !== 'image/png') {
        return $upload;
    }

    $file = $upload['file'];

    // GDでPNGを読み込み
    $image = @imagecreatefrompng($file);
    if (!$image) {
        return $upload;
    }

    // 透過情報を確認（透過PNGはJPEGに変換しない）
    if (imageistruecolor($image)) {
        // 透過チャンネルをチェック
        $has_transparency = false;
        for ($x = 0; $x < imagesx($image); $x++) {
            for ($y = 0; $y < imagesy($image); $y++) {
                $rgba = imagecolorat($image, $x, $y);
                if (($rgba >> 24) & 0x7F) {
                    $has_transparency = true;
                    break 2;
                }
            }
        }

        if ($has_transparency) {
            imagedestroy($image);
            return $upload; // 透過PNGはそのまま
        }
    }

    // JPEGとして保存
    $jpeg_file = preg_replace('/\.png$/i', '.jpg', $file);
    imagejpeg($image, $jpeg_file, 85);
    imagedestroy($image);

    // 元のPNGを削除してJPEGに差し替え
    if (file_exists($jpeg_file)) {
        unlink($file);
        $upload['file'] = $jpeg_file;
        $upload['url']  = str_replace('.png', '.jpg', $upload['url']);
        $upload['type'] = 'image/jpeg';
    }

    return $upload;
}
add_filter('wp_handle_upload', 'mytheme_png_to_jpeg_on_upload');

ステップ5：既存画像を一括再圧縮する

# WP-CLIで全サムネイルを再生成（jpeg_qualityフィルターが適用される）
wp media regenerate --yes

# 圧縮前後のサイズを比較
du -sh wp-content/uploads/2024/

# ImageMagickで一括圧縮（WP外）
find wp-content/uploads/ -name "*.jpg" -exec \
    mogrify -quality 82 -strip {} \;

注意事項

jpeg_quality フィルターはリサイズ時に適用されます。オリジナルファイル自体は変更されません。wp_generate_attachment_metadata フックでオリジナルも処理する必要があります
PNG→JPEG変換は透過（アルファチャンネル）のある画像には実行しないでください。背景が黒くなります
圧縮はCPUを消費します。トラフィックの多い時間帯にバッチ処理する場合はサーバー負荷に注意してください

まとめ

jpeg_quality フィルターでデフォルト品質（82）を75〜82程度に調整するだけで、全サムネイルのファイルサイズを削減できます。wp_generate_attachment_metadata でアップロード時に最大解像度を制限し、Imagickの stripImage() でExifメタデータを削除すると更に効果的です。

Post Views: 15