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

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

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

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

Кроме того, не все браузеры поддерживают WebP, хотя сегодня это уже подавляющее большинство (Chrome, Firefox, Edge, Opera, Safari начиная с версии 14). Чтобы обеспечить корректное отображение изображений во всех браузерах, нужно реализовать fallback на JPEG или PNG.

Если ваш хостинг не поддерживает WebP-изображения на уровне сервера (например, через mod_mime), WordPress может не отдавать их корректно. В этом случае можно обойтись без плагинов, настроив правильные фильтры и правила.

Настройка поддержки WebP в WordPress: шаг за шагом

1. Разрешаем загрузку WebP через фильтр mime_types

По умолчанию WordPress ограничивает список разрешённых форматов. Чтобы разрешить загрузку WebP через медиа-библиотеку, добавим следующий код в файл functions.php вашей темы или в подключаемый файл плагина:

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

Этот код добавляет формат WebP в список разрешённых mime-типов для загрузки.

2. Разрешаем отображение WebP в медиа-библиотеке

Чтобы WordPress корректно отображал миниатюры WebP, нужно разрешить их использование в функции is_image_editable:

function wpgen_fix_webp_thumbnail_display( $types ) {
    $types[] = 'webp';
    return $types;
}
add_filter( 'image_editable_mime_types', 'wpgen_fix_webp_thumbnail_display' );

Это позволит редактировать и просматривать WebP-изображения в админке.

3. Добавляем fallback для браузеров без поддержки WebP

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

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

    $file_path = get_attached_file( $attachment_id );
    $webp_url = pathinfo( $image_webp[0], PATHINFO_DIRNAME ) . '/' . pathinfo( $image_webp[0], PATHINFO_FILENAME ) . '.webp';

    // Проверяем, существует ли WebP файл
    if ( file_exists( str_replace( wp_get_upload_dir()['baseurl'], wp_get_upload_dir()['basedir'], $webp_url ) ) ) {
        $html = '<picture>';
        $html .= '<source srcset="' . esc_url( $webp_url ) . '" type="image/webp">';
        $html .= '<img src="' . esc_url( $image_webp[0] ) . '" alt="' . esc_attr( $alt ) . '">';
        $html .= '</picture>';
    } else {
        $html = '<img src="' . esc_url( $image_webp[0] ) . '" alt="' . esc_attr( $alt ) . '">';
    }
    return $html;
}

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

Оптимизация загрузки WebP без плагинов: дополнительные советы

Настройка сервера для корректной отдачи WebP

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

AddType image/webp .webp

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

types {
    image/webp webp;
}

Это позволит браузерам правильно интерпретировать формат.

Преобразование изображений в WebP автоматом

Без плагинов можно автоматизировать преобразование изображений в WebP с помощью WP-CLI и сторонних инструментов, например, cwebp. Пример команды:

find wp-content/uploads -type f \( -iname '*.jpg' -o -iname '*.png' \) -exec cwebp -q 80 {} -o {}.webp \;

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

Пример интеграции с плагином Clearfy Pro для управления поддержкой WebP

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

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

Выводы и рекомендации для разработчиков

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

• Добавляйте WebP в список разрешённых mime-типов;
• Обеспечивайте корректное отображение WebP в админке и на фронте;
• Реализуйте fallback на JPEG/PNG для старых браузеров;
• Настраивайте сервер для правильной отдачи WebP;
• Используйте автоматические инструменты для конвертации изображений в WebP.

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