Компонент Image и оптимизация изображений¶

Компонент Image, импортируемый из next/image, является расширением HTML-тега img, предназначенным для современного веба. Он включает несколько встроенных оптимизаций, позволяющих добиться хороших показателей Core Web Vitals. Эти оптимизации включают в себя следующее:

улучшение производительности
обеспечение визуальной стабильности
ускорение загрузки страницы
обеспечение гибкости (масштабируемости) изображений

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

import Image from 'next/image';
import imgSrc from '../public/some-image.png';

export default function Home() {
  return (
    <>
      <h1>Главная страница</h1>
      <Image src={imgSrc} alt="" role="presentation" />
    </>
  );
}

Пример использования удаленного изображения:

Обратите внимание на необходимость установки ширины и высоты изображения

import Image from 'next/image';

export default function Home() {
  return (
    <>
      <h1>Главная страница</h1>
      <Image
        src="/some-image.png"
        alt=""
        role="presentation"
        width={500}
        height={500}
      />
    </h1>
  );
}

Определение размеров изображения¶

Image ожидает получение ширины и высоты изображения:

в случае статического импорта (локальное изображение) ширина и высота вычисляются автоматически
ширина и высота могут указываться с помощью соответствующих пропов
если размеры изображения неизвестны, можно использовать проп layout со значением fill

Существует 3 способа решения проблемы неизвестных размеров изображения:

использование режима макетирования fill: этот режим позволяет управлять размерами изображения с помощью родительского элемента. В этом случае размеры родительского элемента определяются с помощью CSS, а размеры изображения с помощью свойств object-fit и object-position:
нормализация изображений: если источник изображений находится под нашим контролем, мы можем добавить изменение размеров изображения при его возвращении в ответ на запрос
модификация вызовов к API: в ответ на запрос может включаться не только само изображение, но и его размеры

Правила стилизации изображений:

выбирайте правильный режим макетирования
используйте className — он устанавливается соответствующему элементу img. Обратите внимание: проп style не передается
при использовании layout="fill" родительский элемент должен иметь position: relative
при использовании layout="responsive" родительский элемент должен иметь display: block