WebP / AVIF

WebP и AVIF — форматы картинок, заменяющие JPG и PNG. WebP сжимает на 25–35% эффективнее JPG при том же качестве, AVIF — ещё в 1,5–2 раза лучше WebP. Поддерживаются всеми современными браузерами.

Для совместимости со старыми клиентами используют <picture> с fallback на JPG. Перевод картинок на WebP — один из самых дешёвых способов улучшить LCP и общий вес страниц.

В CMS обычно есть готовые плагины автоконвертации. На лендинге с тяжёлым hero-изображением переход на WebP/AVIF даёт минус 200–400 мс к LCP.

PNG-исходник      820 КБ
JPG (quality 85)    240 КБ  ×3.4
WebP (quality 80)   95 КБ   ×8.6
AVIF (quality 60)   58 КБ   ×14.1

// AVIF + WebP покрывают всех браузеров
// через picture/source fallback

Главное заблуждение — что достаточно «включить WebP» и LCP улучшится сам. Если hero-картинка остаётся 2000 px шириной на мобильном экране в 360 px, формат почти не спасёт: сначала нужны корректные размеры и атрибут srcset с несколькими разрешениями, и только потом — современный кодек. AVIF при этом кодируется в 5–10 раз медленнее WebP, поэтому на лету его не конвертируют — генерируют заранее при загрузке в CMS и кешируют, иначе первый запрос упрётся в CPU сервера.

Для Core Web Vitals важен ещё один нюанс: LCP-картинку нельзя отдавать через ленивую загрузку — loading="lazy" на первом экране откладывает её и ухудшает метрику. Современный кодек экономит вес, но если браузер не знает размеры до загрузки, прыгает вёрстка и растёт CLS, поэтому width и height проставляют всегда. Яндекс и Google индексируют WebP и AVIF без проблем, но в Яндекс.Вебмастере стоит проверить, что миниатюры для Турбо-страниц и картиночной выдачи отдаются корректно — некоторые плагины ломают альтернативный JPEG в .