Перейти к содержанию

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

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

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
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" />
    </>
  );
}

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

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
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

Комментарии