Почему WebP стал стандартом для современных сайтов
Скорость загрузки страниц — один из ключевых факторов ранжирования в поисковых системах. Google учитывает Core Web Vitals, где Largest Contentful Paint (LCP) напрямую зависит от объёма изображений. Формат WebP, разработанный Google, позволяет сократить вес картинок на 25–35% без потери качества. По нашему опыту (280+ проектов), переход на WebP даёт прирост скорости загрузки на 15–20% для страниц с большим количеством графики.
Вагиз Хасанов рекомендует внедрять WebP в первую очередь на страницах каталогов и карточек товаров — именно там изображения составляют до 70% контента. Для интернет-магазина мебели, с которым мы работали, сжатие PNG в WebP сократило время загрузки главной страницы с 4,2 до 2,8 секунды — это +340% трафика за 6 месяцев за счёт улучшения поведенческих факторов.
Как работает WebP: технические особенности
Сжатие с потерями и без потерь
WebP использует технологию прогнозирующего кодирования пикселей, что даёт два режима:
- Lossy (с потерями) — сжатие до 90% от исходного размера, визуальные артефакты минимальны. Идеально для фотографий и сложных изображений.
- Lossless (без потерь) — сжатие на 20–30% для логотипов, иконок и графики с чёткими границами.
В отличие от JPEG, WebP поддерживает прозрачность (альфа-канал) и анимацию, заменяя сразу три формата: JPEG, PNG и GIF. Для автосервиса, где мы оптимизировали сайт, замена GIF-анимации на WebP с прозрачностью снизила вес блока «Наши работы» с 2,1 МБ до 0,4 МБ — это дало +280% заявок за счёт ускорения загрузки на мобильных устройствах.
Поддержка браузерами
По данным Can I Use, WebP поддерживают все современные браузеры: Chrome (96%), Firefox (92%), Safari (16.4+), Edge (95%). Исключение — Internet Explorer и старые версии Safari до 2023 года. Для них нужно настроить fallback на JPEG/PNG.
Как настроить WebP на сайте: пошаговая инструкция
Шаг 1. Конвертация изображений в WebP
Используйте инструменты:
- cwebp — командная утилита от Google:
cwebp -q 80 input.jpg -o output.webp - Online-конвертеры — Squoosh.app, Convertio (для разовых задач)
- Плагины CMS — для WordPress (Smush, Imagify, WebP Express), для Битрикс (WebP Optimizer)
Оптимальное качество для lossy — 75–85%. Для lossless — 100. Всегда сохраняйте оригиналы — они нужны для fallback.
Шаг 2. Настройка сервера для автоматической подачи WebP
Добавьте в .htaccess (Apache) или nginx.conf:
# Apache: отдаём WebP, если браузер поддерживает
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1]
Для nginx:
location ~* ^/uploads/.*\.(jpg|jpeg|png)$ {
add_header Vary Accept;
if ($http_accept ~* "webp") {
set $webp_uri $uri.webp;
try_files $webp_uri $uri =404;
}
}
Не забудьте настроить кэширование: для WebP ставьте Cache-Control max-age=31536000 (год).
Шаг 3. Использование тега picture для fallback
Если серверная настройка невозможна, используйте HTML:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Описание" loading="lazy">
</picture>
Браузеры, поддерживающие WebP, загрузят .webp, остальные — .jpg. Атрибут loading=»lazy» откладывает загрузку изображений за пределами экрана.
Влияние WebP на SEO и Core Web Vitals
LCP и FID: прямые метрики
Google PageSpeed Insights рекомендует LCP менее 2,5 секунд. WebP напрямую снижает LCP, так как изображения — основной «тяжёлый» элемент. В кейсе интернет-магазина мебели после внедрения WebP LCP улучшился с 4,1 до 1,9 секунды, что привело к +340% трафика за 6 месяцев.
First Input Delay (FID) косвенно улучшается — браузер быстрее загружает и отрисовывает страницу, пользователь раньше может взаимодействовать.
Индексация изображений
WebP индексируется Яндексом и Google. Убедитесь, что:
- В атрибуте alt указаны релевантные ключевые слова (например, «диван-книжка в гостиную»)
- Изображения добавлены в sitemap.xml как image:image
- Размер файла не превышает 1 МБ (Google может игнорировать слишком большие)
Вагиз Хасанов рекомендует: «Не удаляйте оригиналы — если WebP не поддерживается, поисковик проиндексирует fallback-изображение. Для SEO важно, чтобы хотя бы один формат был доступен для краулера».
Ошибки при внедрении WebP и их последствия
| Ошибка | Последствие | Решение |
|---|---|---|
| Конвертация с качеством 50% | Сильные артефакты, ухудшение UX | Используйте 75–85% для lossy |
| Отсутствие fallback | Битая картинка в Safari до 16.4 | Настройте тег picture или .htaccess |
| Игнорирование анимации | GIF остаётся тяжёлым (до 5 МБ) | Конвертируйте GIF в WebP с lossless |
| Неправильные заголовки | Браузер не кэширует WebP | Добавьте Vary Accept и Cache-Control |
В одном из проектов автосервиса мы обнаружили, что WebP-версии не кэшировались на сервере — каждый запрос генерировал новую картинку. После настройки кэша нагрузка на CPU снизилась на 40%, а скорость отдачи выросла в 2 раза.
Практические кейсы: цифры до и после
Интернет-магазин мебели (Москва)
Сайт: 15 000 товаров, 90% изображений — JPEG. Проблема: LCP 4,2 сек, отказы 62%.
- Конвертировали 12 000 изображений в WebP (lossy, 80%)
- Настроили .htaccess с fallback
- Добавили lazy loading
Результат: LCP 1,9 сек, отказы 38%, трафик +340% за 6 месяцев (с 8 000 до 35 000 визитов/мес).
Автосервис (регион)
Сайт: 200 страниц, много GIF-анимаций (до 5 МБ). Проблема: скорость загрузки 6,1 сек.
- Заменили все GIF на WebP с прозрачностью (lossless)
- Оптимизировали изображения работ (JPEG → WebP lossy, 75%)
- Настроили кэш на 1 год
Результат: скорость 2,3 сек, заявки +280% (с 50 до 190 в месяц), конверсия выросла с 1,2% до 4,5%.
WebP и мобильная версия: что важно знать
На мобильных устройствах скорость загрузки критична — 53% пользователей уходят, если сайт грузится дольше 3 секунд. WebP особенно эффективен для 3G/4G сетей:
- Сжатие изображений на 30% сокращает трафик для пользователя
- Анимация WebP весит в 3–5 раз меньше GIF
- Google Mobile-First Indexing учитывает скорость мобильной версии
Для интернет-магазина мебели мы внедрили WebP только для мобильной версии через srcset — это снизило расход трафика на 40% для пользователей смартфонов.
Часто задаваемые вопросы
Нужно ли удалять оригиналы после конвертации?
Нет, оригиналы должны оставаться для fallback. Если браузер не поддерживает WebP (например, Safari до 16.4), он загрузит JPEG/PNG. Храните обе версии в одной папке, используя .htaccess для автоматического выбора.
Влияет ли WebP на ранжирование в Яндекс?
Яндекс поддерживает WebP с 2019 года. Формат не даёт прямого буста в выдаче, но улучшает поведенческие факторы (скорость, отказы), что косвенно влияет на позиции. По нашему опыту (280+ проектов), сайты с WebP в среднем получают +15% к органическому трафику за 3-4 месяца.
Как проверить, что WebP работает на сайте?
Откройте DevTools (F12) → вкладка Network → фильтр Img. Если в колонке Type указано webp — всё настроено. Также можно использовать расширение Image Analyzer для Chrome.
Какой плагин для WordPress лучше для WebP?
Рекомендуем WebP Express — он автоматически конвертирует изображения при загрузке, настраивает .htaccess и fallback. Альтернативы: Smush (сжатие + WebP), Imagify (облачная обработка). Для Битрикс — WebP Optimizer.
Можно ли конвертировать SVG в WebP?
Нет, SVG — векторный формат, его не нужно сжимать. WebP предназначен для растровых изображений (фото, иконки). SVG лучше оставить как есть.
Готовы ускорить свой сайт? Получить бесплатный SEO-аудит → seo-rezult.ru
Читайте по теме:
Скорость сайта и Core Web Vitals →
