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

Автор: Полина Крылова | Опубликовано: 25.02.2026

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

Почему важно использовать WebP в WordPress и как это влияет на скорость

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

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

Без оптимизации время загрузки страницы с изображениями WebP может быть даже больше из-за дополнительной логики и запросов, если реализовать её неправильно.

Плагины для работы с WebP: обзор и настройка

1. Imagify с поддержкой WebP

Imagify автоматически конвертирует загружаемые изображения в WebP и создаёт fallback JPEG/PNG. Плагин интегрируется с медиабиблиотекой и кэширует изображения. Для ускорения отдачи WebP рекомендуется включить опцию "Serve WebP Versions".

Преимущества:

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

2. WebP Express

WebP Express позволяет конвертировать существующие изображения и настраивать правила отдачи WebP через .htaccess или nginx конфигурацию. Это минималистичный и лёгкий плагин без лишних функций.

Для оптимальной работы требуется разрешить серверу отдавать WebP, а также настроить fallback на JPEG/PNG для браузеров без поддержки.

3. ShortPixel Image Optimizer

ShortPixel оптимизирует изображения и конвертирует их в WebP. Важно включить опцию "WebP Delivery" для корректной работы.

Плагин имеет простой интерфейс и поддерживает массовую оптимизацию.

Реализация кастомного решения для WebP с fallback для браузеров

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

Шаг 1: Добавление WebP в разрешённые типы файлов

function wpspeed_allow_webp_uploads($mime_types) {
    $mime_types['webp'] = 'image/webp';
    return $mime_types;
}
add_filter('mime_types', 'wpspeed_allow_webp_uploads');

Это позволит загружать WebP через медиабиблиотеку.

Шаг 2: Вывод изображений с WebP и fallback

Используем элемент <picture> с несколькими источниками, чтобы браузер выбирал подходящий формат:

function wpspeed_picture_webp($image_id, $size = 'full') {
    $img_src = wp_get_attachment_image_src($image_id, $size);
    if (!$img_src) return '';
    $img_url = $img_src[0];
    $webp_url = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $img_url);
    
    return "<picture>\n" .
           "  <source srcset='$webp_url' type='image/webp'>\n" .
           "  <img src='$img_url' alt=''>\n" .
           "</picture>";
}

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

Шаг 3: Генерация WebP при загрузке изображений

Можно автоматически создавать WebP при загрузке, используя библиотеку Imagick, если она доступна на сервере:

function wpspeed_generate_webp_on_upload($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file = get_attached_file($attachment_id);
    $extension = pathinfo($file, PATHINFO_EXTENSION);

    if (!in_array(strtolower($extension), ['jpg', 'jpeg', 'png'])) {
        return $metadata;
    }

    if (!class_exists('Imagick')) {
        return $metadata;
    }

    $webp_file = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $file);

    try {
        $image = new Imagick($file);
        $image->setImageFormat('webp');
        $image->writeImage($webp_file);
        $image->clear();
        $image->destroy();
    } catch (Exception $e) {
        // обработка ошибки, при необходимости
    }

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

Это позволит автоматически создавать WebP-версии при загрузке. Убедитесь, что сервер поддерживает Imagick с WebP.

Дополнительные советы по оптимизации WebP в WordPress

Использование CDN с поддержкой WebP

Чтобы ускорить доставку изображений, рекомендуем использовать CDN, который умеет автоматически отдавать WebP версии, например Cloudflare с опцией Polish. Это снижает нагрузку на сервер и минимизирует время отклика.

Кэширование и правильные заголовки

Для WebP важно настроить заголовки кэширования и сжатия на уровне сервера. Например, включить gzip или brotli сжатие для .webp файлов и выставить долгий expires header.

Проверка поддержки WebP в браузерах

Для корректной работы fallback стоит проверять поддержку WebP с помощью JavaScript или полифиллов, но элемент <picture> уже обеспечивает надёжную кроссбраузерную поддержку.

Заключение

Правильная оптимизация WebP в WordPress — это мощный инструмент для ускорения сайта. Используйте плагины с поддержкой WebP, либо реализуйте кастомное решение, добавляя автоматическую генерацию и корректную отдачу изображений через элемент <picture>. Не забывайте про CDN и кэширование — это усилит эффект и позволит максимально быстро загружать страницы с изображениями.

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