Как работает компонент next/image и зачем он нужен?

`next/image` — обёртка над <img>, которая оптимизирует изображения: меняет формат и размер под устройство, лениво загружает и предотвращает сдвиги вёрстки.

Что делает

• Отдаёт современные форматы (WebP, AVIF), если браузер их поддерживает.
• Генерирует несколько размеров и выбирает подходящий по srcset и sizes.
• Ленивая загрузка по умолчанию; для главного изображения используется priority.
• Резервирует место по width и height, поэтому нет скачков раскладки (CLS).

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Главная страница"
  width={1200}
  height={600}
  priority
  sizes="(max-width: 768px) 100vw, 1200px"
/>

Настройки

Для внешних адресов нужно разрешить домены в next.config.js (images.remotePatterns). Обрезка и сжатие выполняются на сервере и кешируются.

Коротко для собеседования

Компонент уменьшает вес изображений, подбирает формат и размер под устройство и защищает от скачков раскладки.