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

Автор: Вера Морозова | Опубликовано: 29.03.2026

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

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

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

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

Добавление поддержки WebP в WordPress с помощью кода

Для начала убедимся, что WordPress разрешает загрузку файлов с расширением .webp. По умолчанию в последних версиях WordPress это включено, но если на вашем сайте этого нет, добавим расширение вручную через фильтр:

add_filter('wp_check_filetype_and_ext', 'wp24_add_webp_mime_type', 10, 5); 
function wp24_add_webp_mime_type($data, $file, $filename, $mimes, $real_mime) {
    if (!$data['ext'] && !$data['type']) {
        $ext = pathinfo($filename, PATHINFO_EXTENSION);
        if ($ext === 'webp') {
            $data['ext'] = 'webp';
            $data['type'] = 'image/webp';
        }
    }
    return $data;
}

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

Автоматическое создание WebP при загрузке (опционально)

Хотя в этой статье мы не используем плагины, вы можете написать свой код для конвертации загружаемых изображений в WebP с помощью библиотеки GD или Imagick. Пример ниже показывает, как создать WebP из JPEG при загрузке:

add_action('wp_handle_upload', 'wp24_create_webp_version');
function wp24_create_webp_version($upload) {
    $file_path = $upload['file'];
    $mime = mime_content_type($file_path);
    if ($mime === 'image/jpeg' || $mime === 'image/png') {
        $image = null;
        if ($mime === 'image/jpeg') {
            $image = imagecreatefromjpeg($file_path);
        } elseif ($mime === 'image/png') {
            $image = imagecreatefrompng($file_path);
        }
        if ($image) {
            $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
            imagewebp($image, $webp_path, 80); // Качество 80
            imagedestroy($image);
        }
    }
    return $upload;
}

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

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

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

AddType image/webp .webp

Если вы используете Nginx, добавьте в конфигурацию:

types {
    image/webp webp;
}

Также стоит настроить правила переписывания для отдачи WebP в зависимости от поддержки браузера. Например, с помощью mod_rewrite в Apache можно настроить отдачу WebP вместо PNG или JPEG, если браузер поддерживает WebP:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.*)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
</IfModule>

Это позволит отдавать WebP версии изображений, если они есть на сервере и поддерживаются браузером пользователя.

Вывод WebP в шаблонах WordPress

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

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

    $path = get_attached_file($image_id);
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $path);
    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $img_src[0]);

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

Вызовите echo wp24_picture_webp($attachment_id, 'medium'); в шаблонах для вывода изображений с поддержкой WebP.

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

Если вы не хотите менять серверные настройки, можно добавить проверку поддержки WebP на стороне клиента с помощью JavaScript и подменять изображения динамически. Но это менее эффективно, чем серверные методы.

Пример минимальной проверки поддержки WebP на JS:

function wp24_checkWebpSupport(callback) {
    var webP = new Image();
    webP.onload = webP.onerror = function() {
        callback(webP.height === 2);
    };
    webP.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4TAYAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
}

Используйте этот метод для подмены изображений или добавления соответствующих классов на body для CSS-стилей.

Полезные плагины с поддержкой WebP для сравнения

Если вы передумаете использовать плагины, обратите внимание на:

Clearfy Pro — плагин для оптимизации, который умеет управлять поддержкой WebP и кешированием.
WPRemark — плагин для управления изображениями и их оптимизации.

Но помните, что описанные выше методы дают вам полный контроль без лишних зависимостей.

Итоговые рекомендации

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

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