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

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

Почему WebP важен для WordPress и SEO

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

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

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

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

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

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

Проверка поддержки WebP в PHP и GD

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

Проверьте, включена ли поддержка WebP в вашей сборке PHP, выполнив скрипт:

var_dump(gd_info());

Если в выводе есть "WebP Support" => true, то поддержка есть, и можно использовать функции обработки изображений WebP.

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

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

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

    $info = pathinfo($file);
    $ext = strtolower($info['extension']);

    if (in_array($ext, ['jpg', 'jpeg', 'png'])) {
        $image = null;
        if ($ext === 'png') {
            $image = imagecreatefrompng($file);
        } else {
            $image = imagecreatefromjpeg($file);
        }
        if ($image) {
            $webp_file = $info['dirname'] . '/' . $info['filename'] . '.webp';
            imagewebp($image, $webp_file, 80); // Качество 80%
            imagedestroy($image);
        }
    }
    return $metadata;
}
add_filter('wp_generate_attachment_metadata', 'wpboot_create_webp_on_upload', 10, 2);

Этот код автоматически создаст WebP версию для каждой загруженной картинки JPEG или PNG с качеством 80%. Можно настроить качество по своему усмотрению.

Отображение WebP изображений на сайте с fallback

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

function wpboot_get_picture_webp($image_url) {
    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $image_url);
    return '<picture>'
        . '<source srcset="' . esc_url($webp_url) . '" type="image/webp">'
        . '<img src="' . esc_url($image_url) . '" alt="" loading="lazy">'
        . '</picture>';
}

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

Настройка сервера для поддержки WebP

Очень важно настроить сервер так, чтобы он корректно отдавал WebP изображения и поддерживал сжатие. Например, для Apache добавьте в .htaccess следующие правила:

<IfModule mod_rewrite.c>
RewriteEngine On
# Перенаправление на WebP, если браузер поддерживает
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} \.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}.webp -f
RewriteRule (.+) $1.webp [T=image/webp,E=webp,L]
</IfModule>

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

Дополнительные советы по оптимизации

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

Полезные плагины для работы с WebP (если решите использовать их)

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

• Clearfy Pro — плагин с множеством оптимизаций, включая работу с WebP.
• WPRemark — плагин для оптимизации изображений и SEO.

Эти решения подходят, если хотите сэкономить время на доработках.