Как создать автоматическую оптимизацию изображений в WordPress

Оптимизация изображений — один из ключевых аспектов ускорения загрузки сайта и улучшения SEO. На WordPress существует множество плагинов для сжатия и оптимизации изображений, но иногда нужно создать собственное решение, которое будет работать именно под ваши задачи и автоматически оптимизировать все загружаемые медиафайлы.

Почему важна автоматическая оптимизация изображений в WordPress

Каждый загруженный на сайт файл увеличивает вес страницы, замедляет загрузку и может ухудшить пользовательский опыт. Автоматическая оптимизация позволяет:

• Уменьшать размер изображений без заметной потери качества.
• Автоматически применять оптимизацию при загрузке новых файлов.
• Использовать современные форматы, такие как WebP, для повышения эффективности.
• Избавиться от необходимости вручную обрабатывать каждое изображение.

Это особенно важно для сайтов с большим количеством контента и динамическим добавлением медиафайлов.

Обзор популярных плагинов для автоматической оптимизации изображений в WordPress

Прежде чем создавать собственный код, полезно знать, какие готовые решения доступны:

1. Imagify

Плагин позволяет сжимать изображения с выбором уровня качества, конвертирует в WebP, поддерживает пакетную обработку. Прост в настройке и интегрируется в медиабиблиотеку.

2. ShortPixel

Высококачественное сжатие с поддержкой WebP и AVIF, а также возможность оптимизировать уже загруженные изображения. Поддерживает автоматическое сжатие при загрузке.

3. Smush

Популярный плагин с базовым бесплатным функционалом и платными расширениями. Автоматически оптимизирует новые изображения и позволяет сжимать уже загруженные.

Однако у всех этих плагинов есть ограничения по бесплатному тарифу, и иногда нужна более гибкая интеграция под конкретные задачи.

Как создать собственную автоматическую оптимизацию изображений на WordPress с помощью PHP

Давайте рассмотрим пример, как можно программно реализовать автоматическое сжатие и конвертацию изображений при их загрузке, используя возможности WordPress и PHP-библиотеки Imagick.

Для начала подключим обработчик к хуку wp_handle_upload, который срабатывает после загрузки файла:

add_filter('wp_handle_upload', 'wplancer_optimize_image_on_upload');

function wplancer_optimize_image_on_upload($upload) {
    $file = $upload['file'];
    $type = $upload['type'];

    if (strpos($type, 'image') !== false) {
        wplancer_compress_and_convert_image($file);
    }
    return $upload;
}

Функция wplancer_compress_and_convert_image будет отвечать за оптимизацию:

function wplancer_compress_and_convert_image($file_path) {
    if (!extension_loaded('imagick')) {
        return; // Imagick не установлен
    }

    $imagick = new Imagick($file_path);

    // Установка качества 75%
    $imagick->setImageCompressionQuality(75);

    // Сжатие
    if ($imagick->getImageFormat() === 'JPEG') {
        $imagick->stripImage(); // Удалить метаданные
        $imagick->writeImage($file_path);
    }

    // Конвертация в WebP
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
    $imagick->setImageFormat('webp');
    $imagick->writeImage($webp_path);

    $imagick->clear();
    $imagick->destroy();
}

В этом коде мы проверяем, что загруженный файл — изображение, затем сжимаем JPEG до 75% качества, удаляем метаданные и создаём WebP-версию. Это позволит браузерам, которые поддерживают WebP, загружать более лёгкий файл.

Как автоматически показывать WebP-изображения на сайте с fallback на оригинал

Чтобы использовать WebP-версии на фронтенде, можно добавить фильтр для вывода изображений:

add_filter('wp_get_attachment_image_src', 'wplancer_replace_with_webp', 10, 4);

function wplancer_replace_with_webp($image, $attachment_id, $size, $icon) {
    $original_url = $image[0];
    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $original_url);

    // Проверяем, существует ли WebP версия
    $upload_dir = wp_upload_dir();
    $webp_path = str_replace($upload_dir['baseurl'], $upload_dir['basedir'], $webp_url);

    if (file_exists($webp_path)) {
        $image[0] = $webp_url;
    }
    return $image;
}

Этот фильтр заменит URL изображения на WebP, если файл существует, иначе покажет оригинал.

Дополнительные рекомендации по оптимизации изображений на WordPress

Использование плагина Clearfy Pro для комплексной оптимизации

Для тех, кто хочет не только оптимизировать изображения, но и улучшить производительность сайта, можно порекомендовать Clearfy Pro. Этот плагин позволяет отключать ненужные скрипты и стили, оптимизировать базу данных и многое другое, что в комплексе с оптимизацией изображений даст отличный эффект.

Как оптимизировать массово уже загруженные изображения

Если на сайте уже есть много изображений, их тоже можно оптимизировать программно. Пример простого скрипта, который пройдет по всем изображениям в медиабиблиотеке и применит нашу функцию сжатия:

function wplancer_optimize_all_images() {
    $args = [
        'post_type' => 'attachment',
        'post_mime_type' => 'image',
        'posts_per_page' => -1,
    ];

    $query = new WP_Query($args);
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $file_path = get_attached_file(get_the_ID());
            wplancer_compress_and_convert_image($file_path);
        }
        wp_reset_postdata();
    }
}

Этот код можно запускать через WP-CLI или добавить в админку, чтобы запустить оптимизацию по запросу.

Заключение по теме автоматической оптимизации изображений

Создание собственной автоматической оптимизации изображений в WordPress — задача вполне реальная и полезная. Этот подход даёт гибкость и контроль над процессом, позволяет избежать ограничений бесплатных плагинов и интегрировать оптимизацию глубже в ваш сайт.

Использование PHP и Imagick, а также внедрение замены на WebP при выводе изображений, существенно улучшит показатели скорости и SEO вашего сайта на WordPress.

Если хотите расширенные возможности — обратите внимание на решения от WPSHOP и их плагины, которые могут дополнить вашу систему оптимизации.