Как добавить поддержку WebP в тему WordPress с примерами кода

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

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

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

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

Основные шаги добавления поддержки WebP в тему WordPress

1. Проверка поддержки WebP на сервере

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

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

function wp_theme_check_webp_support() {
    if (function_exists('imagewebp')) {
        return true;
    } elseif (class_exists('Imagick')) {
        $imagick = new Imagick();
        $formats = $imagick->queryFormats('WEBP');
        return in_array('WEBP', $formats);
    }
    return false;
}

Эта функция возвращает true, если поддержка WebP есть, и false — если нет.

2. Добавление WebP в список разрешённых форматов загрузки

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

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

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

3. Автоматическая замена изображений на WebP в HTML темы

Чтобы тема автоматически подставляла WebP версии изображений, можно использовать фильтр wp_get_attachment_image_src или менять HTML вывод изображений. Вот пример функции, которая заменит ссылку на изображение на WebP, если файл существует:

function wp_theme_replace_img_to_webp($html, $id) {
    $image_url = wp_get_attachment_url($id);
    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $image_url);

    $webp_path = str_replace(wp_get_upload_dir()['baseurl'], wp_get_upload_dir()['basedir'], $webp_url);

    if (file_exists($webp_path)) {
        $html = str_replace($image_url, $webp_url, $html);
    }
    return $html;
}
add_filter('wp_get_attachment_image', 'wp_theme_replace_img_to_webp', 10, 2);

Эта функция автоматически заменит src в изображениях, если в папке загрузок есть соответствующий WebP файл.

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

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

Пример генерации WebP средствами PHP GD в функции, привязанной к загрузке:

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

    if (function_exists('imagecreatefromjpeg') && function_exists('imagewebp')) {
        $image = imagecreatefromjpeg($file_path);
        if ($image !== false) {
            $webp_path = preg_replace('/\.(jpe?g)$/i', '.webp', $file_path);
            imagewebp($image, $webp_path, 80); // качество 80
            imagedestroy($image);
        }
    }
    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wp_theme_generate_webp_on_upload', 10, 2);

Этот код создаст WebP версию для JPEG файлов при загрузке в медиатеку.

Интеграция WebP с темой на уровне шаблонов

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

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Описание">
</picture>

Такой подход гарантирует, что браузер, поддерживающий WebP, загрузит именно этот формат, а остальные — JPEG или PNG.

Для автоматизации генерации HTML с <picture> можно написать вспомогательную функцию в теме:

function wp_theme_picture_img($id, $alt = '') {
    $url_jpg = wp_get_attachment_url($id);
    $url_webp = preg_replace('/\.(jpe?g|png)$/i', '.webp', $url_jpg);

    $upload_dir = wp_get_upload_dir();
    $webp_path = str_replace($upload_dir['baseurl'], $upload_dir['basedir'], $url_webp);

    if (file_exists($webp_path)) {
        return '<picture>'
            . '<source srcset="' . esc_url($url_webp) . '" type="image/webp">'
            . '<source srcset="' . esc_url($url_jpg) . '" type="image/jpeg">'
            . '<img src="' . esc_url($url_jpg) . '" alt="' . esc_attr($alt) . '">'
            . '</picture>';
    } else {
        return '<img src="' . esc_url($url_jpg) . '" alt="' . esc_attr($alt) . '">';
    }
}

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

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

Если хотите упростить задачу, можно использовать готовые решения:

Clearfy Pro — оптимизирует сайт, включая генерацию и подключение WebP, интегрируется с темами без правки кода. Подробнее на wpshop.ru.
WebP Express — бесплатный плагин для конвертации и обслуживания WebP форматов.
Imagify — сервис и плагин для сжатия и конвертации изображений в WebP.

Советы по работе с WebP в теме WordPress

Для корректной работы WebP стоит учесть следующие моменты:

Проверяйте поддержку WebP на сервере и в браузерах пользователей.
Создавайте fallback-версии изображений (JPEG/PNG) для браузеров без поддержки WebP.
Используйте <picture> для правильного выбора формата.
Автоматизируйте создание WebP при загрузке через плагины или собственный код.
Регулярно очищайте кэш и проверяйте отображение изображений после изменений.

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