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

Автор: Владимир Фомин | Опубликовано: 15.12.2025

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

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

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

Тем не менее, несмотря на поддержку WebP в современных браузерах и WordPress 5.8+, на многих сайтах до сих пор используются старые версии CMS или темы, которые не поддерживают этот формат из коробки. Добавление поддержки WebP вручную позволяет:

Загружать WebP изображения в медиабиблиотеку WordPress;
Отображать WebP в галереях и на страницах;
Обеспечивать fallback для браузеров, которые не поддерживают WebP;
Избавиться от необходимости устанавливать сторонние плагины, что снижает нагрузку на сервер.

Добавление поддержки WebP в WordPress через functions.php

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

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

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

Обработка отображения WebP в медиабиблиотеке и контенте

По умолчанию WordPress может не показывать превью для WebP в медиабиблиотеке, особенно на старых версиях. Чтобы исправить это, добавим поддержку отображения миниатюр:

function wpskins_fix_webp_preview($file) {
    $image_types = ['image/webp'];
    if (in_array($file['type'], $image_types)) {
        $file['ext'] = 'webp';
    }
    return $file;
}
add_filter('wp_check_filetype_and_ext', 'wpskins_fix_webp_preview', 10, 1);

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

Автоматическое конвертирование загружаемых изображений в WebP

Если вы хотите автоматизировать процесс конвертации JPEG/PNG в WebP при загрузке, можно использовать PHP-библиотеки, например, GD или Imagick. Ниже пример функции с использованием Imagick для конвертации:

function wpskins_convert_to_webp($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file_path = path_join($upload_dir['basedir'], $metadata['file']);

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

    $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();

    // Добавим webp файл в метаданные
    $metadata['sizes']['webp'] = [
        'file' => basename($webp_path),
        'width' => $metadata['width'],
        'height' => $metadata['height'],
        'mime-type' => 'image/webp',
    ];

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

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

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

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

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описание изображения">
</picture>

Для автоматизации вывода таких тегов можно написать функцию, которая будет выводить picture с WebP и fallback:

function wpskins_picture_webp($image_id, $alt = '') {
    $img_src = wp_get_attachment_image_src($image_id, 'full');
    if (!$img_src) return '';

    $webp_src = preg_replace('/\.(jpe?g|png)$/i', '.webp', $img_src[0]);

    return '<picture><source srcset="' . esc_url($webp_src) . '" type="image/webp">' .
           '<img src="' . esc_url($img_src[0]) . '" alt="' . esc_attr($alt) . '"></picture>';
}

Советы по оптимизации и совместимости WebP в WordPress

При добавлении поддержки WebP без плагинов важно учитывать следующие моменты:

Не все серверы поддерживают Imagick с WebP — проверьте наличие расширения;
Если Imagick недоступен, можно использовать GD, но качество и поддержка WebP там хуже;
Для старых браузеров обязательно используйте fallback через <picture> или JavaScript;
Регулярно проверяйте загрузку и отображение WebP на разных устройствах;
Для удобства работы с WebP можно использовать бесплатные инструменты и онлайн-конвертеры для оптимизации изображений;
При использовании темы Reboot или Root с wpshop.ru можно дополнительно оптимизировать вывод изображений, используя встроенные хуки этих тем.

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

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

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