Оптимизация картинок: WebP, AVIF и здравый смысл

Сначала вес и размер, потом магия форматов

AVIF не спасёт, если вы отдаёте фото 4000px в блок шириной 400. Обрезайте под реальное место показа, потом сжимайте, потом выбирайте формат.

JPEG/PNG vs WebP vs AVIF

• JPEG - универсально для фото, но тяжелее современных форматов.
• PNG - для графики с прозрачностью, часто избыточен для фото.
• WebP - хороший стандарт для большинства сайтов.
• AVIF - ещё легче при том же качестве, но смотрите поддержку и пайплайн генерации.

Практичные правила

1. Не загружайте оригинал с телефона «как есть».
2. Задавайте width/height или aspect-ratio, чтобы не прыгал CLS.
3. Lazy-load ниже сгиба, но LCP-картинку - приоритетно.
4. Ретинимость: 2x только там, где реально видно разницу.

Конструкторы и «автосжатие»

Авторежим помогает, но не всегда. Проверяйте фактический вес в Network. Иногда виджеты и фоны всё равно тащат мегабайты.

ВебШтрих в проектах сразу закладываем современные форматы и адекватные размеры - это дешевле вечной борьбы с PageSpeed после запуска.