Добавление поддержки WebP в WordPress без плагинов: практическое руководство

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

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

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

Добавление WebP в медиа библиотеку WordPress

По умолчанию WordPress разрешает загрузку только некоторых форматов изображений. Для разрешения загрузки WebP нужно добавить соответствующий mime-тип в фильтр upload_mimes. Сделаем это с помощью функции wpmy_allow_webp_upload:

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

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

Проверка поддержки WebP сервером

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

<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

Для nginx добавьте в конфигурацию:

types {
    image/webp webp;
}

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

Автоматический вывод WebP с fallback на JPEG/PNG в WordPress

Чтобы браузеры, поддерживающие WebP, получали этот формат, а остальные — исходные изображения, используйте тег <picture> с элементом <source>. Ниже пример функции wpmy_display_webp_picture, которая выводит разметку для картинки:

function wpmy_display_webp_picture($image_id, $alt = '', $class = '') {
    $image_src = wp_get_attachment_image_src($image_id, 'full');
    if (!$image_src) return;

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

    echo '<picture>';
    echo '<source type="image/webp" srcset="' . esc_url($webp_url) . '">';
    echo '<img src="' . esc_url($image_url) . '" alt="' . esc_attr($alt) . '" class="' . esc_attr($class) . '" loading="lazy">';
    echo '</picture>';
}

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

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

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

function wpmy_generate_webp_on_upload($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file = get_attached_file($attachment_id);
    $image_info = getimagesize($file);

    if (!$image_info) return $metadata;

    $mime = $image_info['mime'];
    $webp_file = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file);

    switch ($mime) {
        case 'image/jpeg':
            $image = imagecreatefromjpeg($file);
            break;
        case 'image/png':
            $image = imagecreatefrompng($file);
            break;
        default:
            return $metadata;
    }

    if (function_exists('imagewebp')) {
        imagewebp($image, $webp_file, 80); // качество 80%
        imagedestroy($image);
    }

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

Этот код создаст WebP-версию изображения при его загрузке в WordPress. Убедитесь, что на сервере включена поддержка PHP GD с WebP.

Использование WebP с плагинами из WPSHOP

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

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

Резюме и рекомендации по использованию WebP в WordPress

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

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

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