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

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

Почему стоит использовать WebP и какие проблемы возникают в WordPress

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

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

Решить эти задачи можно вручную, используя хуки и фильтры WordPress, а также минимальный PHP-код.

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

Для начала нужно разрешить загрузку файлов с расширением .webp. Это делается с помощью фильтра wpbe_mime_types:

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

Этот код добавляет WebP в список разрешенных типов файлов. Добавьте его в файл functions.php вашей темы или в файл кастомного плагина.

Проверка mime-типа при загрузке

Иногда WordPress может блокировать WebP из-за проверки mime-типа. Чтобы исправить это, добавим дополнительную проверку:

function wpbe_fix_webp_mime_type($data, $file, $filename, $mimes) {
    $ext = strtolower(pathinfo($filename, PATHINFO_EXTENSION));
    if ($ext === 'webp') {
        $data['ext'] = 'webp';
        $data['type'] = 'image/webp';
    }
    return $data;
}
add_filter('wp_check_filetype_and_ext', 'wpbe_fix_webp_mime_type', 10, 4);

Генерация миниатюр для WebP изображений

По умолчанию WordPress не генерирует миниатюры для WebP. Для этого нужно добавить поддержку WebP в функцию обработки изображений:

function wpbe_add_webp_to_image_editor($editors) {
    array_unshift($editors, 'WP_Image_Editor_WebP');
    return $editors;
}
add_filter('wp_image_editors', 'wpbe_add_webp_to_image_editor');

Однако класс WP_Image_Editor_WebP отсутствует в ядре, поэтому проще всего расширить стандартный класс WP_Image_Editor_GD или WP_Image_Editor_Imagick. Например, можно зарегистрировать поддержку WebP в Imagick:

function wpbe_imagick_support_webp($formats) {
    $formats[] = 'WEBP';
    return $formats;
}
add_filter('wp_image_editors', function($editors) {
    if (class_exists('Imagick')) {
        return ['WP_Image_Editor_Imagick', 'WP_Image_Editor_GD'];
    }
    return $editors;
});

При использовании Imagick, WordPress сможет создавать миниатюры WebP автоматически, если сервер поддерживает этот формат.

Альтернативная загрузка WebP с fallback для старых браузеров

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

function wpbe_add_webp_picture_tag($html, $id, $caption, $title, $align, $url, $size, $alt) {
    $image_url = wp_get_attachment_image_url($id, $size);
    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $image_url);
    if ($webp_url) {
        $html = '<picture>' .
            '<source srcset="' . esc_url($webp_url) . '" type="image/webp">' .
            $html .
            '</picture>';
    }
    return $html;
}
add_filter('image_send_to_editor', 'wpbe_add_webp_picture_tag', 10, 8);

Этот пример заменит стандартный тег <img> на <picture> с WebP в качестве источника и fallback на оригинальное изображение.

Конвертация изображений в WebP при загрузке без плагинов

Для автоматизации конвертации JPEG и PNG в WebP можно использовать серверные библиотеки PHP, например Imagick или GD. Ниже пример функции с Imagick, которая конвертирует загруженное изображение в WebP и сохраняет рядом с оригиналом:

function wpbe_convert_image_to_webp($metadata, $attachment_id) {
    $upload_dir = wp_upload_dir();
    $file = $upload_dir['basedir'] . '/' . $metadata['file'];

    if (!class_exists('Imagick')) {
        return $metadata; // Imagick отсутствует
    }

    $image = new Imagick($file);
    $image->setImageFormat('webp');
    $webp_file = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file);
    $image->writeImage($webp_file);
    $image->clear();
    $image->destroy();

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

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

Полезные плагины для работы с WebP в WordPress

Если вам всё же удобнее использовать готовые решения, обратите внимание на следующие плагины, которые хорошо интегрируются и позволяют гибко управлять WebP:

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

Выводы и рекомендации по поддержке WebP в WordPress

Добавление поддержки WebP без плагинов требует корректной настройки mime-типов, генерации миниатюр и вывода изображений с использованием <picture>. Использование Imagick значительно упрощает конвертацию и обработку изображений. Если у вас хостинг без Imagick, можно попробовать GD, но качество и производительность будут хуже.

Также важно протестировать сайт в разных браузерах, чтобы убедиться, что fallback работает корректно и изображения отображаются для всех пользователей.

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