Next.js: Оптимизация изображений — типичные gotcha на собеседовании

Question

Accepted Answer

Интервьюеры проверяют, понимаете ли вы `next/image` как layout-контракт и CDN-пайплайн, а не просто «умный `<img>`».

## Разбор

- **«Зачем width и height?»** Чтобы зарезервировать место и предотвратить CLS через aspect ratio — не для размера скачивания. Static import подставляет их автоматически.
- **Без `sizes` на `fill`/responsive** браузер считает `100vw` → overserving. Самая частая ошибка в проде.
- **`priority` на всё** убивает lazy-load и забивает preload scanner. Только одно изображение — LCP.
- **Remote 400 без `remotePatterns`.** По задумке — защита от злоупотребления оптимизатором как открытым прокси.
- **`unoptimized`** обходит весь пайплайн (GIF, уже оптимизированные ассеты, static export) — но теряете resize и конвертацию формата.
- **Blur placeholder** автоматичен для static import; для remote `src` нужен свой `blurDataURL`.
- **`quality` по умолчанию 75.** 100 раздувает байты без заметной пользы; ~60 часто не видно глазу, но файл сильно меньше.

## Итог

Главные ловушки: забытый `sizes`, `priority` не на LCP и отсутствие allow-list для remote — это типичные red flags на собеседовании.