Next.js: Оптимизация изображений — ментальная модель

next/image — не «fancy <img>», а on-demand image CDN + layout contract: резервирует место (CLS), srcset per device, AVIF/WebP transcode, lazy-load by default.

Разбор

Одно правило: нужен aspect ratio — width/height, fill + sizes, или static import. Иначе теряется layout stability.

Три проблемы в каждой картинке:

1. CLS — <img> без dimensions: height 0 до load, потом jolt. next/image резервирует box до pixels.
2. Overserving bytes — 4000px hero на 375px phone ~90% waste. srcset + browser pick.
3. Wrong format — JPEG vs AVIF (30–50% smaller). Next transcodes по Accept на request time.

Что сказать

next/image — image pipeline, masquerading as component. JSX прост; ценность — optimizer за /_next/image, resize + cache on demand.

Итог

Думайте pipeline + layout contract: dimensions/sizes обязательны, optimizer и CDN — за кулисами компонента.