16 июля, 2026 Вкл. 16 июля, 2026

WebP в WordPress для Chrome: настройка автоматической отдачи

Q: Как проверить, поддерживает ли браузер WebP без JavaScript?

Самый надёжный способ – проверять заголовок Accept на сервере. Если он содержит image/webp, браузер умеет работать с WebP.

Q: Можно ли использовать эту схему с другими браузерами, например, Edge?

Да. Edge основан на Chromium и тоже отправляет image/webp в заголовке Accept, поэтому правило будет работать без изменений.

Show column

Краткое содержание

Введение: зачем отдавать WebP только в Chrome

WebP‑формат позволяет уменьшить размер изображений до 30 % без потери качества. Браузер Chrome поддерживает WebP с версии 23, поэтому оптимально отдавать WebP‑версии только тем пользователям, у кого включена поддержка. Это сохраняет совместимость с другими браузерами и повышает скорость загрузки страниц.

1. Проверка поддержки WebP в браузере

Самый надёжный способ – проверять заголовок Accept. Если браузер отправляет image/webp, значит он умеет работать с форматом.

function is_webp_supported() { if (!empty($_SERVER['HTTP_ACCEPT']) && strpos($_SERVER['HTTP_ACCEPT'], 'image/webp')!== false) { return true; } return false; }

Эту функцию удобно вызывать в functions.php перед выводом URL изображения.

Почему не использовать JavaScript‑детектор?

JS‑детектор работает после загрузки страницы, а нам нужно решить, какой файл отдавать ещё на уровне сервера. Поэтому проверка заголовка – единственный быстрый способ.

2. Конвертация изображений на лету

Если оригиналы хранятся в JPEG/PNG, их можно конвертировать в WebP «на лету» и кэшировать результат. Ниже пример простого PHP‑скрипта, который создаёт WebP‑файл, если его ещё нет.

function get_webp_path($original_path) { $info = pathinfo($original_path); $webp_path = $info['dirname']. '/'. $info['filename']. '.webp'; if (!file_exists($webp_path) && is_webp_supported()) { $image = null; switch (strtolower($info['extension'])) { case 'jpg': case 'jpeg': $image = imagecreatefromjpeg($original_path); break; case 'png': $image = imagecreatefrompng($original_path); break; } if ($image) { imagewebp($image, $webp_path, 80); // 80 % качества imagedestroy($image); } } return $webp_path; }

После получения пути к WebP‑файлу заменяем URL в разметке.

Кеширование результата

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

3. Правила в.htaccess для автоматической переадресации

Чтобы сервер сам выбирал нужный формат, добавим правила перезаписи. Они проверяют наличие Accept‑заголовка и наличие готового WebP‑файла.

RewriteEngine On # Если браузер поддерживает WebP и файл.webp существует – отдаем его RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{REQUEST_FILENAME}.webp -f RewriteRule ^(.+?).(jpe?g|png)$ $1.$2.webp [L]

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

Совместимость с CDN

Если вы используете CDN, убедитесь, что правила реплицируются на его уровне, иначе CDN может вернуть оригинальный JPEG/PNG.

4. Интеграция с популярными плагинами

Многие плагины уже умеют генерировать WebP (например, Telegram bot WordPress интеграция использует схожие подходы для кастомных уведомлений). Однако их автоматическая отдача часто работает без проверки Accept. Чтобы «подключить» наш метод, добавьте фильтр:

add_filter('wp_get_attachment_url', function($url) { if (is_webp_supported()) { $path = str_replace(site_url('/'), ABSPATH, $url); $webp = get_webp_path($path); if (file_exists($webp)) { return str_replace(ABSPATH, site_url('/'), $webp); } } return $url; });

Таким образом, любой плагин, который использует wp_get_attachment_url, будет отдавать WebP, если он доступен.

Когда плагин конфликтует?

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

5. Тестирование и отладка

После внедрения проверьте работу в разных браузерах. Самый быстрый способ – воспользоваться онлайн‑инструментами REST API тестер или локальными cURL‑запросами.

curl -I -H "Accept: image/webp,*/*;q=0.8" https://example.com/wp-content/uploads/2023/01/photo.jpg

В ответе должна быть строка Content-Type: image/webp и путь к файлу .webp. Если получаем image/jpeg, проверьте правила.htaccess и наличие WebP‑файла.

Очистите кеш браузера и серверный (OPcache, плагины кеширования).
Проверьте права доступа к каталогу uploads – скрипт должен иметь возможность записывать новые файлы.
Включите WP_DEBUG_LOG для отлова ошибок в функции конвертации.

Отчёт о скорости

С помощью Google PageSpeed Insights измерьте улучшение. При правильной настройке можно увидеть снижение общего веса страницы на 20‑30 %.

Заключение

Настройка автоматической отдачи WebP в WordPress для Chrome требует лишь нескольких шагов: проверка Accept, конверсия на лету, правила .htaccess и интеграция с плагинами. При правильной реализации ваш сайт будет быстрее, а пользователи Chrome получат более лёгкие изображения без потери качества.