Добавление поддержки WebP в WordPress без плагинов

Автор: Роман Петров | Опубликовано: 17.04.2026

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

Почему стоит использовать WebP в WordPress

WebP — это современный формат изображений, разработанный Google, который позволяет уменьшить размер файлов на 25-35% по сравнению с PNG и JPEG при сохранении качества. Это особенно важно для сайтов на WordPress, где большое количество изображений влияет на скорость загрузки и SEO.

Преимущества внедрения WebP:

Сокращение времени загрузки страниц;
Уменьшение трафика и нагрузки на сервер;
Улучшение позиций в поисковых системах за счет скорости;
Поддержка прозрачности, анимации и других функций.

Ограничения и подготовка сервера

Прежде чем внедрять поддержку WebP, важно убедиться, что сервер поддерживает работу с этим форматом. Для этого нужно проверить, установлены ли библиотеки libwebp и поддерживается ли формат в PHP GD или Imagick.

Для проверки Imagick можно использовать следующий код:

<?php
$imagick = new Imagick();
$formats = $imagick->queryFormats('WEBP');
if (in_array('WEBP', $formats)) {
    echo 'Поддержка WebP есть';
} else {
    echo 'Поддержка WebP отсутствует';
}
?>

Если поддержка отсутствует, обратитесь к хостеру с просьбой установить необходимые библиотеки.

Добавляем загрузку WebP в медиа-библиотеку WordPress

По умолчанию WordPress не разрешает загружать файлы WebP. Добавим поддержку, используя фильтр mime_types в functions.php вашей темы или дочерней темы:

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

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

Конвертация изображений в WebP при загрузке

Чтобы автоматически конвертировать загружаемые JPEG и PNG в WebP, можно использовать PHP Imagick. Добавим обработчик загрузки файлов, который будет создавать WebP-версии.

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

    $image = new Imagick($file_path);
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);

    $image->setImageFormat('webp');
    $image->writeImage($webp_path);
    $image->clear();
    $image->destroy();

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

Этот код создаст WebP-файл для каждого загруженного JPEG или PNG и сохранит его рядом с оригиналом.

Вывод WebP изображений на сайте с fallback на оригинал

Для отображения WebP с поддержкой браузеров, которые его не понимают, используем тег <picture> с элементом <source>. В functions.php добавим функцию, которая будет заменять вывод изображений:

function wp0_get_picture_webp($image_id, $size = 'full', $alt = '') {
    $image_src = wp_get_attachment_image_src($image_id, $size);
    if (!$image_src) return '';

    $file_path = get_attached_file($image_id);
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
    $upload_dir = wp_upload_dir();
    $webp_url = str_replace($upload_dir['basedir'], $upload_dir['baseurl'], $webp_path);

    if (file_exists($webp_path)) {
        return '<picture>' .
            '<source srcset="' . esc_url($webp_url) . '" type="image/webp">' .
            '<img src="' . esc_url($image_src[0]) . '" alt="' . esc_attr($alt) . '" loading="lazy">' .
            '</picture>';
    } else {
        return '<img src="' . esc_url($image_src[0]) . '" alt="' . esc_attr($alt) . '" loading="lazy">';
    }
}

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

Пример использования:

echo wp0_get_picture_webp(123, 'medium', 'Описание изображения');

Оптимизация и кэширование WebP изображений

После того как WebP добавлен, важно обеспечить корректное кеширование и поддержку CDN. Настройте сервер (например, Nginx или Apache) для отдачи WebP, если браузер поддерживает этот формат. Пример для Nginx:

location ~* \.(jpg|jpeg|png)$ {
    add_header Vary Accept;
    try_files $uri.webp $uri =404;
}

Это позволит отдавать WebP версии вместо оригинальных, если браузер способен их принимать.

Также можно использовать плагин WPCache для дополнительного кэширования и оптимизации загрузки.

Альтернативные решения: плагины для WebP

Если вы не хотите писать код, существуют популярные плагины, которые автоматизируют работу с WebP:

Imagify – конвертирует изображения в WebP и оптимизирует их;
ShortPixel Image Optimizer – поддерживает WebP и CDN;
WebP Express – мощный плагин для настройки правил отдачи WebP;
Clearfy Pro – среди прочих функций упрощает поддержку WebP и оптимизацию сайта.

Однако описанный в статье способ позволит вам контролировать процесс и избежать зависимости от сторонних решений.

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

Чтобы убедиться, что WebP работает корректно, используйте инструменты разработчика в браузере (Network tab). Фильтруйте по изображениям и смотрите, что браузер получает файлы с расширением .webp.

Также можно проверить поддержку WebP с помощью онлайн-сервисов, например: https://caniuse.com/webp.

Наш каталог плагинов WordPress