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

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

Почему важно оптимизировать изображения в WordPress

Большие по размеру изображения приводят к замедлению загрузки страниц, что негативно влияет на SEO и поведение пользователей. Оптимизация позволяет:

• Сократить вес файлов без потери качества;
• Уменьшить время загрузки страниц;
• Снизить нагрузку на сервер и трафик;
• Улучшить показатели Core Web Vitals и SEO.

Стандартный WordPress не выполняет сжатие изображений при загрузке, поэтому важно добавить эту функцию самостоятельно.

Основные способы оптимизации изображений в WordPress

Есть несколько подходов для оптимизации картинок:

1. Использование готовых плагинов

Плагины вроде Clearfy Pro или WPRemark предлагают удобные решения, но это дополнительные зависимости.

2. Оптимизация с помощью внешних сервисов

Можно интегрировать API сервисов TinyPNG, Kraken.io, Imagify и т.п., но для этого нужны ключи, лимиты и интернет-зависимость.

3. Встроенная оптимизация на уровне сервера и PHP

Самый гибкий способ — использовать PHP-библиотеки для сжатия и ресайза при загрузке изображений, реализуя её через хуки WordPress. Именно этот метод мы рассмотрим.

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

Мы будем использовать хук wp_handle_upload, который срабатывает после загрузки файла и позволяет обработать его до сохранения.

Для сжатия JPEG и PNG будем использовать стандартные функции GD, встроенные в PHP. Также покажем пример конвертации в WebP.

Шаг 1. Добавляем обработчик загрузки

add_filter('wp_handle_upload', 'cyrtolat_optimize_uploaded_image');
function cyrtolat_optimize_uploaded_image($upload) {
    $file = $upload['file'];
    $mime = mime_content_type($file);
    
    // Оптимизируем только JPEG и PNG
    if (in_array($mime, ['image/jpeg', 'image/png'])) {
        cyrtolat_optimize_image($file, $mime);
    }
    return $upload;
}

Шаг 2. Реализуем функцию оптимизации

function cyrtolat_optimize_image($file_path, $mime) {
    if ($mime === 'image/jpeg') {
        $image = imagecreatefromjpeg($file_path);
        // Перезаписываем с качеством 75%
        imagejpeg($image, $file_path, 75);
        imagedestroy($image);
    } elseif ($mime === 'image/png') {
        $image = imagecreatefrompng($file_path);
        // Сохраняем с компрессией 6 (0-9)
        imagepng($image, $file_path, 6);
        imagedestroy($image);
    }
}

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

Шаг 3. Дополнительно: создание WebP версии

WebP — современный формат с хорошим сжатием. Создадим аналогичное изображение в WebP рядом с оригиналом.

function cyrtolat_create_webp_version($file_path, $mime) {
    $info = pathinfo($file_path);
    $webp_path = $info['dirname'] . '/' . $info['filename'] . '.webp';

    if ($mime === 'image/jpeg') {
        $image = imagecreatefromjpeg($file_path);
    } elseif ($mime === 'image/png') {
        $image = imagecreatefrompng($file_path);
    } else {
        return;
    }
    imagewebp($image, $webp_path, 80);
    imagedestroy($image);
}

// Добавляем вызов в основную функцию
function cyrtolat_optimize_uploaded_image($upload) {
    $file = $upload['file'];
    $mime = mime_content_type($file);

    if (in_array($mime, ['image/jpeg', 'image/png'])) {
        cyrtolat_optimize_image($file, $mime);
        cyrtolat_create_webp_version($file, $mime);
    }
    return $upload;
}

Тонкости и рекомендации при оптимизации изображений

Обработка больших изображений

Для очень больших файлов можно дополнительно реализовать ресайз по максимальной ширине и высоте, например, 1920px, чтобы не грузить сервер и не хранить слишком тяжелые файлы. Это делается с помощью функций imagescale() или imagecopyresampled().

Проверка поддержки WebP

Не все браузеры поддерживают WebP, поэтому важно на стороне фронтенда выводить WebP с запасом на fallback. В WordPress можно реализовать это через фильтр wp_get_attachment_image_src или использовать тег <picture>.

Кэширование и CDN

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

Пример интеграции с плагином Clearfy Pro для расширенной оптимизации

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

Например, можно отключить встроенную оптимизацию Clearfy и использовать собственный код, либо расширить её с помощью хуков Clearfy.

Итог

Автоматическая оптимизация изображений без плагинов — вполне реализуемая задача, которая позволит вам держать вес сайта под контролем, не перегружая WordPress лишними расширениями. Используйте PHP-функции GD для сжатия и создания WebP, добавляйте ресайз и интегрируйте с CDN для максимального эффекта. При необходимости подключайте профессиональные решения, такие как Clearfy Pro, с учетом особенностей вашего проекта.