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

Автор: Игорь Ершов | Опубликовано: 24.12.2025

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

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

Большие и не оптимизированные изображения увеличивают время загрузки страницы, что негативно влияет на поведение посетителей и позиции в поисковых системах. Согласно исследованиям, задержка загрузки на 1 секунду может снизить конверсию на 7%. Поэтому важно не только правильно загружать изображения, но и оптимизировать их размер, формат и качество.

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

Кроме того, правильное использование атрибутов srcset и sizes помогает адаптировать изображения под разные устройства, что улучшает скорость и UX.

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

Плагин Smush — популярный инструмент для сжатия изображений

Smush автоматически сжимает изображения при загрузке, удаляет ненужные метаданные, позволяет ленивую загрузку (lazy load) и даже оптимизирует уже загруженные файлы. Это простой и эффективный способ без глубоких технических знаний.

Для установки:

Перейдите в админ-панель WordPress → Плагины → Добавить новый.
Введите в поиске "Smush" и установите плагин от WPMU DEV.
Активируйте и настройте параметры оптимизации.

ShortPixel — глубокая оптимизация и конвертация форматов

ShortPixel позволяет не только сжимать изображения, но и конвертировать их в современные форматы WebP и AVIF, которые обеспечивают лучшее качество при меньшем размере.

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

Ручная оптимизация и использование современных форматов

Конвертация изображений в WebP с помощью Imagick и PHP

Если у вас есть доступ к серверу и возможности PHP, можно написать функцию, которая автоматически создает WebP-версию изображения при загрузке, если сервер поддерживает Imagick.

function wpqa_convert_to_webp($upload) {
    $file_path = $upload['file'];
    $file_info = pathinfo($file_path);
    $webp_path = $file_info['dirname'] . '/' . $file_info['filename'] . '.webp';

    if (class_exists('Imagick')) {
        $image = new Imagick($file_path);
        $image->setImageFormat('webp');
        $image->writeImage($webp_path);
        $image->clear();
        $image->destroy();
    }

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

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

Добавление поддержки WebP в теге <img> с атрибутом srcset

Чтобы браузеры, поддерживающие WebP, загружали оптимальный формат, можно динамически выводить тег <picture> с WebP и fallback на JPEG/PNG. Пример функции для шорткода:

function wpqa_picture_webp_shortcode($atts) {
    $atts = shortcode_atts(array('id' => 0, 'alt' => ''), $atts);
    $id = intval($atts['id']);
    if (!$id) return '';

    $jpg_url = wp_get_attachment_url($id);
    $file_info = pathinfo($jpg_url);
    $webp_url = $file_info['dirname'] . '/' . $file_info['filename'] . '.webp';

    $alt = esc_attr($atts['alt']);

    return '<picture>' .
           '<source srcset="' . esc_url($webp_url) . '" type="image/webp">' .
           '<img src="' . esc_url($jpg_url) . '" alt="' . $alt . '">' .
           '</picture>';
}
add_shortcode('wpqa_webp_image', 'wpqa_picture_webp_shortcode');

Используйте шорткод [wpqa_webp_image id=123 alt="Описание"], чтобы выводить оптимизированные изображения с поддержкой WebP.

Ленивая загрузка и отложенная загрузка с помощью плагина My Popup и встроенных функций WordPress

Ленивая загрузка (lazy load) в WordPress 5.5+ по умолчанию

С версии 5.5 WordPress поддерживает атрибут loading="lazy" у изображений, что позволяет браузеру откладывать загрузку изображений вне экрана до тех пор, пока пользователь не приблизится к ним.

Это значительно сокращает время первичной загрузки страницы и экономит трафик.

Использование плагина My Popup для оптимизации всплывающих окон с изображениями

Если на сайте используются всплывающие окна с изображениями или видео, плагин My Popup позволяет отложить загрузку контента и управлять временем появления окон, что снижает нагрузку и улучшает UX.

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

Удаление неиспользуемых изображений и медиафайлов

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

Для их поиска и удаления можно использовать плагин Media Cleaner или написать скрипт для поиска файлов без привязки к записям.

Оптимизация формата и размера изображений с помощью Clearfy Pro

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

Выводы и лучшие практики для wpqa.ru

Используйте плагин Smush или ShortPixel для автоматической оптимизации и конвертации в WebP.
Добавьте поддержку WebP через шорткод с тегом <picture>, чтобы обеспечить совместимость.
Включите ленивую загрузку через встроенную поддержку WordPress или плагины.
Регулярно очищайте медиа-библиотеку от неиспользуемых файлов.
Используйте Clearfy Pro для оптимизации базы данных и управления размерами изображений.

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

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