Как добавить поддержку WebP в WordPress без плагинов

Автор: Нина Журавлева | Опубликовано: 18.03.2026

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

Почему важна поддержка WebP в WordPress

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

Ускорение загрузки страниц;
Снижение нагрузки на сервер и трафика;
Улучшение пользовательского опыта;
Положительное влияние на SEO.

Однако, чтобы сайт корректно отображал WebP-изображения, необходимо обеспечить их поддержку на уровне сервера и CMS. Многие плагины делают это за вас, но они могут замедлять сайт и создавать лишние зависимости. Поэтому рассмотрим, как обойтись без плагинов.

Настройка сервера для поддержки WebP

Первый шаг — убедиться, что ваш сервер правильно отдаёт WebP-изображения и поддерживает заголовки Accept для браузеров, которые умеют их обрабатывать.

1. Добавление MIME-типа WebP

Для Apache в файл .htaccess или конфигурацию сервера нужно добавить:

AddType image/webp .webp

Для Nginx — в конфигурации сервера:

types {
    image/webp webp;
}

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

2. Настройка перезаписи для показа WebP, если браузер поддерживает

Для Apache можно использовать в .htaccess следующий код, чтобы отдавать WebP, если браузер его поддерживает и если WebP-версия файла существует:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpg|jpeg|png)$
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpg|jpeg|png)$ $1.webp [T=image/webp]
</IfModule>

Для Nginx можно добавить в конфигурацию:

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

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

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

WordPress с версии 5.8 уже частично поддерживает WebP, но иногда темы и функции по умолчанию не всегда корректно обрабатывают этот формат. Чтобы добавить полноценную поддержку, можно расширить функционал темы.

1. Разрешение загрузки WebP в медиа библиотеку

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

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

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

2. Добавление поддержки WebP для генерации миниатюр

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

Пример функции для конвертации в WebP при загрузке (с использованием Imagick):

function wpzoom_convert_to_webp($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file = get_attached_file($attachment_id);

    $info = pathinfo($file);
    $extension = strtolower($info['extension']);

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

    if (class_exists('Imagick')) {
        $image = new Imagick($file);
        $webp_file = $info['dirname'] . '/' . $info['filename'] . '.webp';
        $image->setImageFormat('webp');
        $image->writeImage($webp_file);
        $image->clear();
        $image->destroy();

        // Добавляем WebP в метаданные
        $metadata['webp'] = str_replace($upload_dir['basedir'], $upload_dir['baseurl'], $webp_file);
    }

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

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

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

Чтобы показывать WebP изображения, если они есть, и при этом не ломать отображение в старых браузерах, можно использовать HTML5 тег <picture>:

function wpzoom_picture_webp($attachment_id, $size = 'full') {
    $img_url = wp_get_attachment_image_url($attachment_id, $size);
    $meta = wp_get_attachment_metadata($attachment_id);

    $upload_dir = wp_upload_dir();

    if (isset($meta['webp'])) {
        $webp_url = $meta['webp'];
    } else {
        // Попытка получить URL WebP рядом с оригиналом
        $info = pathinfo($img_url);
        $webp_url = $info['dirname'] . '/' . $info['filename'] . '.webp';
    }

    echo '<picture>';
    echo '<source srcset="' . esc_url($webp_url) . '" type="image/webp">';
    echo '<img src="' . esc_url($img_url) . '" alt="" loading="lazy">';
    echo '</picture>';
}

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

Использование плагина Clearfy Pro для расширенной оптимизации изображений

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

Заключение по добавлению WebP в WordPress без плагинов

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