WebP и AVIF ускоряют картинки не магией, а уменьшением веса: где прирост реально заметен

WebP и AVIF ускоряют картинки не магией, а уменьшением веса: где прирост реально заметен

Если у вас лендинг с 5–8 крупными изображениями, переход на WebP обычно даёт минус 20–35% к размеру файлов без видимой потери качества. AVIF сжимает ещё агрессивнее, но на сложных фото иногда требует больше CPU на декодирование, поэтому для старых Android и слабых устройств его надо тестировать отдельно.

Самый честный порядок миграции такой:
— оставить JPG/PNG как fallback;
— собрать WebP для массового кеша и быстрых страниц;
— AVIF включать там, где критичен вес, а картинок мало;
— для логотипов, иконок и простых графиков часто выгоднее SVG, а не конвертация растра.

На практике главный прирост виден не в «красоте», а в LCP: если hero-изображение весило 400–800 KB, после конвертации и правильного srcset можно убрать сотни килобайт с первого экрана. Но если картинка уже сжата плохо, WebP/AVIF только замаскируют проблему — нужно ещё резать исходник, размеры и качество.

Схема без боли: генерируйте два формата на сервере или в билде, отдавайте AVIF через picture, а WebP держите как основной запасной вариант. Если после миграции TTFB не изменился, а LCP упал — значит, вы оптимизировали именно узкое место.