WebP

Как работает

WebP использует более эффективные алгоритмы сжатия, чем JPEG: разбивает картинку на блоки предсказания и хранит только разницу между предсказанным и реальным пикселем. Для фотографий это даёт 25-35% экономии веса при том же визуальном качестве, для графики с плоскими цветами и градиентами — до 50%.

Формат поддерживает и lossy-сжатие (аналог JPEG), и lossless (аналог PNG с прозрачностью), плюс анимацию (замена GIF). Все современные браузеры — Chrome, Firefox, Safari, Edge — поддерживают WebP нативно с 2020 года. Для страховки на устаревших браузерах используется тег <picture> с fallback:

<picture>
  <source srcset="/img/kettle.webp" type="image/webp">
  <img src="/img/kettle.jpg" alt="Электрический чайник Bosch" width="800" height="600">
</picture>

Браузер сам выберет первый поддерживаемый формат. Если WebP умеет — берёт его, если нет — падает в JPEG. Атрибуты width и height обязательны для обеих версий, чтобы не портить CLS.

Дальнейший шаг — AVIF (ещё эффективнее по сжатию, но с ограниченной поддержкой). Обычно ставят цепочку: AVIF → WebP → JPEG.

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

Вес картинок — одна из главных причин плохого LCP на контентных сайтах. Фотография hero-блока в JPEG на 800 КБ на медленном мобильном соединении отдаётся 3-4 секунды. Та же картинка в WebP весит 500 КБ и приходит за 2 секунды — разница видна прямо в оценке Core Web Vitals.

Google Search Central в разделе Web Performance прямо рекомендует WebP как формат по умолчанию для новых сайтов. PageSpeed Insights в списке рекомендаций отдельным пунктом просит «Использовать современные форматы изображений» — под этим имеется в виду WebP или AVIF.

Яндекс.Вебмастер в разделе «Скорость загрузки» аналогично сигнализирует, если картинки отдаются устаревшими форматами. Для интернет-магазинов с сотнями фото товаров переход на WebP часто даёт заметный сдвиг в мобильном ранжировании — за счёт улучшения LCP и общего Page Experience.

Частые ошибки

• CDN отдаёт WebP без правильного заголовка Content-Type: image/webp — часть браузеров не может декодировать.
• Конвертация в WebP сделана с параметром качества 100 — файл получается тяжелее оригинального JPEG.
• <picture> без атрибутов width и height — резкий сдвиг CLS при загрузке.
• WebP-версия отдаётся вместо JPEG для всех подряд без <picture> — в Safari 13 и старее картинки не грузятся вовсе.
• LCP-картинка в WebP помечена loading="lazy" — LCP всё равно проседает, потому что браузер откладывает загрузку.
• Забыли перегенерировать WebP после ретуши JPEG — старая версия остаётся в кэше CDN.

Как проверить

В Chrome DevTools вкладка Network → фильтр img → колонка Type покажет формат каждой картинки: image/webp, image/jpeg, image/png. PageSpeed Insights (pagespeed.web.dev) в аудите «Serve images in modern formats» выводит список URL с не-WebP картинками и оценкой возможной экономии. Расширение Lighthouse в DevTools даёт то же самое локально.

SEO Crawler при обходе фиксирует формат каждой картинки на странице, вес до и после конвертации в WebP, наличие fallback через <picture>. В отчёте это часть блока «Изображения» — с оценкой суммарной экономии веса по сайту и приоритизацией правок по типам страниц (главная, категории, товары).

Вывод

WebP — стандартный формат картинок для современного веба, поддерживается всеми браузерами. Ставьте <picture> с fallback на JPEG для страховки, задавайте width и height обязательно, не поднимайте качество выше 80-85 — экономия веса ощутима именно на средних значениях. Переход на WebP даёт заметное улучшение LCP без переработки вёрстки.