Как использовать WebP для изображений в WordPress на мобильных устройствах

Автор: Валерия Алексеева | Опубликовано: 19.03.2026

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

Почему WebP важен для мобильных WordPress-сайтов

Мобильные устройства часто имеют более медленное соединение и ограниченный трафик, поэтому оптимизация изображений становится ключевым фактором скорости загрузки и удобства пользователей. WebP обеспечивает до 30% меньший размер по сравнению с JPEG или PNG при сопоставимом качестве, что ускоряет загрузку страниц и снижает расход трафика.

Кроме того, Google активно продвигает WebP, и поддержка этого формата влияет на SEO, улучшая поведенческие факторы и позиции сайта в поисковой выдаче.

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

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

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

Самый простой способ — использовать плагин, который автоматически конвертирует загружаемые изображения в WebP и подключает их на сайте с fallback. Рекомендуемые плагины:

Imagify — мощный инструмент для оптимизации и конвертации изображений с поддержкой WebP.
EWWW Image Optimizer — бесплатный плагин с функцией конвертации в WebP и настройками для мобильных.
WebP Express — позволяет гибко настраивать вывод WebP и fallback без потери качества.

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

Ручная интеграция WebP с поддержкой fallback

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

Пример функции для вывода изображений с WebP и fallback:

function wpmobile_output_webp_image($image_url, $alt = '') {
    $webp_url = preg_replace('/\.(jpg|jpeg|png)$/i', '.webp', $image_url);
    echo '<picture>';
    echo '<source srcset="' . esc_url($webp_url) . '" type="image/webp">';
    echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($alt) . '">';
    echo '</picture>';
}

Эта функция выводит элемент <picture>, где сначала идет WebP версия, а если браузер не поддерживает WebP, подгружается оригинальное изображение.

Обработка загрузки и генерация WebP на сервере

Для ручного метода нужно также конвертировать загруженные в WordPress изображения в WebP. Это можно сделать с помощью PHP и библиотеки GD или Imagick.

Пример функции для конвертации JPEG/PNG в WebP при загрузке:

function wpmobile_convert_to_webp($file) {
    $file_path = $file['tmp_name'];
    $file_type = mime_content_type($file_path);

    if (!in_array($file_type, ['image/jpeg', 'image/png'])) {
        return $file; // не обрабатываем другие форматы
    }

    $image = null;
    if ($file_type === 'image/jpeg') {
        $image = imagecreatefromjpeg($file_path);
    } elseif ($file_type === 'image/png') {
        $image = imagecreatefrompng($file_path);
    }

    if (!$image) {
        return $file;
    }

    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file_path);
    imagewebp($image, $webp_path, 80); // качество 80
    imagedestroy($image);

    // можно дополнительно сохранить webp в медиа библиотеку, если нужно

    return $file;
}
add_filter('wp_handle_upload', 'wpmobile_convert_to_webp');

Этот код конвертирует загруженное изображение в WebP и сохраняет рядом с оригиналом. Далее можно доработать логику для регистрации WebP в медиабиблиотеке и вывода через <picture>.

Как проверить поддержку WebP на мобильных устройствах и браузерах

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

function wpmobile_checkWebPSupport(callback) {
    var img = new Image();
    img.onload = function() { callback(img.width === 1); };
    img.onerror = function() { callback(false); };
    img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4TAYAAAAvAAAAAAfQ//73v/+BiOh/AAA=';
}

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

Однако, использование <picture> значительно упрощает задачу и является стандартом для адаптивного вывода изображений.

Использование формата WebP для изображений в WordPress на мобильных устройствах