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

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

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

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

Добавляем WebP поддержку в загрузчик медиафайлов WordPress

Для того чтобы WordPress позволял загружать файлы в формате WebP, нам нужно добавить соответствующие MIME-типы и расширения в разрешённые типы файлов. Это можно сделать через фильтр wptavern_mime_types, который добавим в functions.php вашей темы или в собственный плагин.

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

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

Автоматическое конвертирование загружаемых изображений в WebP

Для улучшения производительности можно автоматически создавать WebP версии загружаемых изображений. Так, посетители с поддержкой браузера будут видеть WebP, а остальные — оригинальные форматы. Ниже пример функции, которая на основе библиотеки GD создаёт WebP копию каждого загружаемого JPEG или PNG.

function wptavern_generate_webp_on_upload( $metadata, $attachment_id ) {
    $upload_dir = wp_upload_dir();
    $file = get_attached_file( $attachment_id );

    $image_info = getimagesize( $file );
    $mime = $image_info['mime'];

    if ( in_array( $mime, array('image/jpeg', 'image/png') ) ) {
        $image = null;
        if ( $mime === 'image/jpeg' ) {
            $image = imagecreatefromjpeg( $file );
        } elseif ( $mime === 'image/png' ) {
            $image = imagecreatefrompng( $file );
        }

        if ( $image ) {
            $webp_file = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file);
            imagewebp( $image, $webp_file, 80 ); // Качество 80%
            imagedestroy( $image );
        }
    }

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

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

Вывод WebP изображений на сайте с fallback для неподдерживаемых браузеров

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

function wptavern_filter_img_html( $html, $id ) {
    $file = get_attached_file( $id );
    $webp_file = preg_replace('/\.(jpe?g|png)$/i', '.webp', $file);
    $upload_dir = wp_upload_dir();n    $webp_url = str_replace( $upload_dir['basedir'], $upload_dir['baseurl'], $webp_file );

    if ( file_exists( $webp_file ) ) {
        $original_url = wp_get_attachment_url( $id );
        $alt = get_post_meta( $id, '_wp_attachment_image_alt', true );

        $picture = '<picture>';
        $picture .= '<source srcset="' . esc_url( $webp_url ) . '" type="image/webp">';
        $picture .= '<img src="' . esc_url( $original_url ) . '" alt="' . esc_attr( $alt ) . '">';
        $picture .= '</picture>';

        return $picture;
    }

    return $html;
}
add_filter( 'wp_get_attachment_image', 'wptavern_filter_img_html', 10, 2 );

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

Рекомендации по ускорению и безопасности

После внедрения WebP важно проверить, что сервер поддерживает правильные заголовки и MIME-типы для WebP. В некоторых случаях может потребоваться добавить в .htaccess или конфигурацию Nginx следующие строки:

AddType image/webp .webp

Или для Nginx:

location ~* \.(webp)$ {
    add_header Vary Accept;
}

Также стоит контролировать права доступа к файлам WebP, чтобы они были доступны для чтения веб-сервером.

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

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

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

Заключение

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

Если вы хотите, чтобы этот процесс был ещё проще, рассмотрите возможность использования профессиональных плагинов, например, Clearfy Pro.