Как Next.js оптимизирует изображения? (Компонент Image, сжатие, форматы)

Компонент <Image /> — это замена обычному HTML-тегу <img> с мощной оптимизацией "под капотом".

Ключевые функции оптимизации:

1. Современные форматы:

   • Next.js автоматически конвертирует изображения в WebP или AVIF (если браузер поддерживает), которые often much smaller than JPEG или PNG при том же качестве.

2. Изменение размера "на лету":

   • Вы указываете только необходимые размеры в макете (width, height).

   • Next.js создает и отдает изображение именно этого размера, а не оригинальное огромное.

3. Lazy Loading по умолчанию:

   • Изображения загружаются только тогда, когда они появляются в viewport (области просмотра), экономя трафик и ускоряя первоначальную загрузку.

4. Приоритизация загрузки:

   • С помощью пропса priority можно пометить изображения, важные для Largest Contentful Paint (LCP) (например, hero-изображение), чтобы загрузить их немедленно.

Пример использования:

import Image from 'next/image';

export default function Hero() {
  return (
    <div>
      <Image
        src="/hero.jpg" // Путь к изображению в папке `public` или абсолютный URL
        alt="Description of image"
        width={800} // Обязательные пропсы
        height={600}
        priority // Помечаем это изображение как приоритетное
      />
    </div>
  );
}

Важные аспекты:

• Обязательные размеры: Нужно явно указывать width и height для предотвращения Cumulative Layout Shift (CLS).

• Домены (domains): Для оптимизации изображений с внешних URL их нужно добавить в next.config.js в images.domains.

• Хостинг: Оптимизация работает на любом хостинге, но максимально эффективна на Vercel.