Ускорение изображений: WebP, AVIF, lazy-load, responsive

Картинки — обычно самый тяжёлый груз страницы: на них приходится больше половины веса. Ускорить сайт часто означает разобраться именно с изображениями. Четыре приёма дают основной эффект: современные форматы, адаптивные размеры, ленивая загрузка и фиксированные габариты. По порядку.

WebP и AVIF: сколько экономят

Старые JPEG и PNG весят лишнее. Современные форматы сжимают заметно сильнее при том же качестве:

• WebP — на 25–35% легче JPEG, поддерживается всеми актуальными браузерами.
• AVIF — ещё компактнее, до ~50% против JPEG, но кодируется дольше.

Отдавайте новые форматы с запасным вариантом через <picture>:

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="…" width="1200" height="630">
</picture>

srcset и sizes под ретину и мобилки

Незачем грузить картинку 1600px на телефон с узким экраном. srcset даёт браузеру выбор, sizes подсказывает ширину места:

<img src="p-800.webp"
  srcset="p-400.webp 400w, p-800.webp 800w, p-1600.webp 1600w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800" height="600" alt="…">

Браузер сам возьмёт подходящий размер под экран и плотность пикселей: ретина получит чёткую версию, мобильный интернет не будет тянуть лишние мегабайты.

lazy-load без вреда для LCP

Атрибут loading="lazy" откладывает загрузку картинок ниже экрана — они грузятся при подходе скролла. Правило одно: не вешайте lazy на главное изображение первого экрана, иначе замедлите LCP. Верхнему баннеру — loading="eager", всему остальному — lazy.

width/height против CLS

Если не задать размеры, браузер не знает, сколько места займёт картинка, и вёрстка прыгает при подгрузке — это портит CLS. Всегда указывайте width и height (или aspect-ratio в CSS), тогда браузер зарезервирует место заранее.

Чеклист внедрения

1. Пережать все изображения в WebP, крупные — ещё и в AVIF.
2. Обернуть в <picture> с запасным JPEG/PNG.
3. Нарезать 2–3 размера и раздавать через srcset/sizes.
4. Проставить width/height каждому <img>.
5. loading="lazy" всему, кроме героя первого экрана.
6. Подключить ресайз и сжатие на CDN, чтобы не хранить варианты вручную.

Вывод

Современный формат, адаптивные размеры, ленивая загрузка и заданные габариты — этого хватает, чтобы страница похудела в разы и перестала прыгать. Большинство шагов автоматизируется на этапе сборки и на CDN. Если хотите переложить это на нас и получить быстрый сайт, оптимизируем скорость вашего сайта — от диагностики до внедрения CDN и кэша.