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

`next/image` отдаёт responsive sizes, современные форматы где поддерживается и lazy loading по умолчанию. `priority` помечает кандидатов LCP; `sizes` подсказывает браузеру ширину запроса; remote patterns ограничивают хосты.

					import Image from 'next/image';

<Image src="/hero.jpg" alt="Product" width={1200} height={630} priority sizes="100vw" />
				

Неверный `sizes` тратит bandwidth; без `priority` на LCP-изображении страдают Core Web Vitals.

На интервью: layout stability, CDN resizing и когда допустим обычный `img`.

Типовые ошибки: огромные remote images без размеров, lazy-loading hero above the fold, открытые remotePatterns в production.

Компромисс: автоматическая оптимизация против сложности image pipeline на build/runtime.

Чеклист:

• width, height или fill с известным aspect.
• priority только для LCP image.
• Явные remotePatterns.
• sizes под реальные breakpoints layout.