intermediate

Оптимизация изображений

Выбирайте responsive sizes, современные форматы, сжатие, priority hints и CDN cache для image-heavy интерфейсов.

Изображения часто доминируют в LCP и bandwidth. Оптимизируйте размеры, современные форматы, сжатие, responsive `srcset`, CDN transforms и priority hints.

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

| Техника | Зачем | |---------|-------| | Responsive sizes | Не отдавать 2000px asset в слот 400px | | AVIF/WebP | Лучшее сжатие чем JPEG/PNG | | CDN resizing | Варианты под DPR устройства | | Blur placeholder | Воспринимаемая скорость без layout shift |

Используйте `next/image`, Astro assets для sizing и lazy rules. Audit CMS — marketing часто грузит многомегабайтные PNG.

На интервью: `srcset` и `sizes`; цепочка fallback AVIF; art direction через `<picture>`; CDN vs build-time optimization.

Типовые ошибки: CSS-scale огромных оригиналов; нет dimensions; WebP без fallback где нужен.

Компромисс — сложность build/CDN против сэкономленных байт и выигрыша LCP.

Чеклист:

Decoded size ≤ display × DPR.
Современные форматы с fallback.
Preload только настоящих LCP images.
Image bytes per route в RUM.