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

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

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

WebP — это формат изображений, разработанный Google, который поддерживает как сжатие с потерями, так и без потерь. Его преимущества:

• Снижение размера файлов на 25-35% по сравнению с JPEG и PNG;
• Поддержка прозрачности (альфа-канала), в отличие от JPEG;
• Поддержка анимации, как в GIF;
• Улучшение показателей Core Web Vitals за счет ускорения загрузки страниц.

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

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

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

Добавьте следующий код в файл functions.php вашей темы или в кастомный плагин:

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

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

Обеспечение поддержки WebP в редакторе и на фронтенде

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

1. Проверка MIME-типов. Важно, чтобы сервер поддерживал отдачу WebP с правильным заголовком Content-Type: image/webp. Для Apache добавьте в .htaccess:

AddType image/webp .webp

2. Обработка генерации миниатюр. По умолчанию WordPress не создает миниатюры для WebP, что может привести к ошибкам в админке или при выводе.

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

function wptool_webp_is_displayable( $result, $path ) {
    if ( ! $result ) {
        $info = getimagesize( $path );
        if ( $info['mime'] === 'image/webp' ) {
            return true;
        }
    }
    return $result;
}
add_filter( 'file_is_displayable_image', 'wptool_webp_is_displayable', 10, 2 );

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

Чтобы добиться максимальной оптимизации, лучше автоматически конвертировать загружаемые JPEG и PNG в WebP. Без плагинов это можно сделать через использование PHP-библиотеки imagick или gd.

Пример функции, которая при загрузке создает WebP-версию изображения:

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

    $image = wp_get_image_editor( $file );
    if ( is_wp_error( $image ) ) {
        return $metadata;
    }

    $webp_file = preg_replace( '/\.(jpe?g|png)$/i', '.webp', $file );
    $saved = $image->save( $webp_file, 'image/webp' );

    if ( ! is_wp_error( $saved ) ) {
        // Можно добавить WebP в метаданные
        $metadata['webp'] = str_replace( $upload_dir['basedir'] . '/', '', $webp_file );
    }

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

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

Вывод WebP в шаблонах WordPress с использованием тега picture

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

Пример функции для вывода изображения с WebP и fallback:

function wptool_picture_image( $attachment_id, $size = 'full', $alt = '' ) {
    $image_src = wp_get_attachment_image_src( $attachment_id, $size );
    if ( ! $image_src ) {
        return '';
    }

    $upload_dir = wp_upload_dir();
    $file_path = str_replace( $upload_dir['baseurl'], $upload_dir['basedir'], $image_src[0] );
    $webp_path = preg_replace( '/\.(jpe?g|png)$/i', '.webp', $file_path );
    $webp_url = str_replace( $upload_dir['basedir'], $upload_dir['baseurl'], $webp_path );

    if ( file_exists( $webp_path ) ) {
        return '<picture>' .
               '<source srcset="' . esc_url( $webp_url ) . '" type="image/webp">' .
               '<img src="' . esc_url( $image_src[0] ) . '" alt="' . esc_attr( $alt ) . '">' .
               '</picture>';
    } else {
        return '<img src="' . esc_url( $image_src[0] ) . '" alt="' . esc_attr( $alt ) . '">';
    }
}

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

Дополнительные рекомендации и полезные плагины для WebP

Хотя мы рассматриваем решение без плагинов, иногда удобно использовать инструменты для расширенной оптимизации:

• Clearfy Pro — плагин для оптимизации и ускорения WordPress с поддержкой WebP;
• OmniVideo — для оптимизации видео и изображений;
• Используйте CDN, поддерживающие WebP, например Cloudflare, для автоматической конвертации и доставки.

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