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

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

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

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

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

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

1. Использование плагина Imagify

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

Преимущества:

• Автоматическая конвертация при загрузке
• Поддержка резервных копий
• Совместимость с большинством тем и плагинов

Настройка простая: после установки активируйте WebP в настройках плагина и убедитесь, что на сервере разрешена работа с WebP.

2. Плагин WebP Express

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

WebP Express поддерживает несколько способов конвертации, включая использование cwebp на сервере, что позволяет экономить ресурсы.

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

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

Пример функции wpcoder_add_webp_support()

function wpcoder_add_webp_support($html, $id, $size, $icon, $attr, $url) {
    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $url);
    $picture = '<picture>\n';
    $picture .= '    <source srcset="' . esc_url($webp_url) . '" type="image/webp">\n';
    $picture .= '    <img src="' . esc_url($url) . '" alt="">\n';
    $picture .= '</picture>';
    return $picture;
}
add_filter('wp_get_attachment_image', 'wpcoder_add_webp_support', 10, 6);

Данная функция заменяет стандартный вывод изображения на тег <picture>, который подставляет WebP для поддерживаемых браузеров и оригинал для остальных. Для работы необходимо, чтобы WebP-файлы существовали на сервере с тем же именем, но с расширением .webp.

Автоматическое создание WebP при загрузке

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

function wpcoder_generate_webp_on_upload($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file = get_attached_file($attachment_id);
    $image_info = pathinfo($file);
    $webp_file = $image_info['dirname'] . '/' . $image_info['filename'] . '.webp';

    if (function_exists('imagewebp')) {
        $ext = strtolower($image_info['extension']);
        if (in_array($ext, array('jpg', 'jpeg', 'png'))) {
            if ($ext === 'png') {
                $image = imagecreatefrompng($file);
            } else {
                $image = imagecreatefromjpeg($file);
            }
            if ($image) {
                imagewebp($image, $webp_file);
                imagedestroy($image);
            }
        }
    }
    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpcoder_generate_webp_on_upload', 10, 2);

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

Обеспечение совместимости с браузерами и SEO

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

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

Оптимизация вывода и кэширование

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

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

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

• Используйте плагины Imagify или WebP Express для простого внедрения поддержки WebP без глубоких технических знаний.
• Если хотите полный контроль, реализуйте поддержку WebP в теме через фильтры и создавайте WebP-файлы на этапе загрузки с помощью PHP.
• Обязательно используйте тег <picture> для корректного отображения в разных браузерах.
• Проверяйте работу кэширования и совместимость с плагинами оптимизации.

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