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

Автор: Алина Полякова | Опубликовано: 29.03.2026

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

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

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

Сжимать изображения без заметной потери качества;
Автоматически конвертировать в современные форматы (WebP, AVIF);
Уменьшать вес файлов, снижая нагрузку на сервер и трафик;
Обеспечивать единообразие качества для всего контента сайта.

Давайте разберём, как это реализовать на практике.

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

Если вы хотите контролировать процесс и избежать зависимости от сторонних сервисов, можно написать собственный код для автоматического сжатия изображений при загрузке. Для сжатия мы используем библиотеку imagick, которая должна быть установлена на сервере.

Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

function wpstart_optimize_image_on_upload($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file_path = $upload_dir['basedir'] . '/' . $metadata['file'];

    if (!extension_loaded('imagick')) {
        return $metadata; // Imagick не доступен
    }

    try {
        $image = new Imagick($file_path);
        $image->stripImage(); // Удаляем метаданные
        $image->setImageCompressionQuality(75); // Качество 75%

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

        // Можно добавить запись WebP в метаданные для дальнейшего использования

    } catch (Exception $e) {
        error_log('WPStart image optimization error: ' . $e->getMessage());
    }

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

Этот код автоматически создаёт оптимизированную версию изображения в формате WebP при загрузке файла. Метод stripImage() очищает метаданные, а сжатие снижает вес. Важно, чтобы PHP расширение Imagick было доступно на сервере.

Как использовать WebP на сайте

После создания WebP файлов желательно выводить их в HTML, если браузер поддерживает этот формат. Для этого можно использовать следующий фильтр:

function wpstart_replace_img_with_webp($html, $id, $caption, $title, $align, $url, $size, $alt) {
    $upload_dir = wp_upload_dir();
    $img_path = get_attached_file($id);
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $img_path);
    $webp_url = str_replace($upload_dir['basedir'], $upload_dir['baseurl'], $webp_path);

    if (file_exists($webp_path)) {
        $html = str_replace('<img', '<picture><source srcset="' . esc_url($webp_url) . '" type="image/webp"><img', $html);
        $html .= '</picture>';
    }

    return $html;
}
add_filter('image_send_to_editor', 'wpstart_replace_img_with_webp', 10, 8);

Этот код оборачивает стандартный тег <img> в <picture> с WebP источником, обеспечивая совместимость с браузерами, которые не поддерживают WebP.

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

Выбор правильного формата

JPEG отлично подходит для фотографий, PNG — для графиков и изображений с прозрачностью, WebP и AVIF — современные форматы с лучшим сжатием. Используйте автоматическое конвертирование в WebP, как описано выше, чтобы улучшить производительность.

Lazy load и CDN

Используйте ленивую загрузку (lazy load), чтобы изображения грузились по мере прокрутки страницы. Многие плагины, например Smush, имеют такую функцию. Также подумайте о подключении CDN для быстрой доставки изображений по всему миру.

Оптимизация больших изображений

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

Интеграция с плагинами WPShop

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

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

Итоги и рекомендации

Автоматическая оптимизация изображений — обязательный элемент современного сайта на WordPress. Для большинства проектов оптимально начать с готовых плагинов, таких как Smush или ShortPixel. Если нужна максимальная гибкость и контроль — используйте собственные решения на базе Imagick, как показано в примерах.

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

Используйте возможности плагинов WPShop для комплексного улучшения скорости и безопасности вашего WordPress сайта.

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