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

Компонент <Image> в Next.js расширяет HTML-элемент <img>, предоставляя:

Оптимизацию размера: Автоматическая подача изображений правильного размера для каждого устройства с использованием современных форматов, таких как WebP.
Визуальную стабильность: Предотвращение сдвига макета (layout shift) при загрузке изображений.
Быструю загрузку страниц: Загрузка изображений только при попадании в область видимости с использованием нативной ленивой загрузки браузера и опциональных размытых плейсхолдеров.
Гибкость работы с активами: Изменение размера изображений по требованию, включая изображения на удалённых серверах.

Чтобы начать использовать <Image>, импортируйте его из next/image и отобразите в своём компоненте.

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

import Image from 'next/image'

export default function Page() {
  return <Image src="" alt="" />
}

Свойство src может принимать локальные или удалённые изображения.

🎥 Видео: Подробнее об использовании next/image → YouTube (9 минут).

Локальные изображения

Статические файлы, такие как изображения и шрифты, можно хранить в папке public в корневой директории. Файлы внутри public можно ссылаться в коде, начиная с базового URL (/).

Структура папок, показывающая app и public

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="Фото автора"
      width={500}
      height={500}
    />
  )
}

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="/profile.png"
      alt="Фото автора"
      width={500}
      height={500}
    />
  )
}

Статически импортируемые изображения

Также можно импортировать и использовать локальные файлы изображений. Next.js автоматически определит внутренние width и height изображения на основе импортированного файла. Эти значения используются для определения соотношения сторон и предотвращения кумулятивного сдвига макета (CLS) во время загрузки изображения.

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="Фото автора"
      // width={500} предоставляется автоматически
      // height={500} предоставляется автоматически
      // blurDataURL="data:..." предоставляется автоматически
      // placeholder="blur" // Опциональное размытие при загрузке
    />
  )
}

import Image from 'next/image'
import ProfileImage from './profile.png'

export default function Page() {
  return (
    <Image
      src={ProfileImage}
      alt="Фото автора"
      // width={500} предоставляется автоматически
      // height={500} предоставляется автоматически
      // blurDataURL="data:..." предоставляется автоматически
      // placeholder="blur" // Опциональное размытие при загрузке
    />
  )
}

В этом случае Next.js ожидает, что файл app/profile.png будет доступен.

Удалённые изображения

Для использования удалённого изображения можно передать строку URL в свойство src.

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Фото автора"
      width={500}
      height={500}
    />
  )
}

import Image from 'next/image'

export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Фото автора"
      width={500}
      height={500}
    />
  )
}

Поскольку Next.js не имеет доступа к удалённым файлам во время сборки, необходимо вручную указать свойства width, height и опциональное blurDataURL. width и height используются для определения правильного соотношения сторон и предотвращения сдвига макета при загрузке изображения.

Для безопасного разрешения изображений с удалённых серверов необходимо определить список поддерживаемых шаблонов URL в next.config.js. Будьте как можно более конкретными, чтобы предотвратить злоупотребления. Например, следующая конфигурация разрешает изображения только из определённого бакета AWS S3:

import type { NextConfig } from 'next'

const config: NextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

export default config

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
        search: '',
      },
    ],
  },
}

Image

Оптимизация изображений в вашем Next.js приложении с использованием встроенного компонента `next/image`.

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

Локальные изображения

Статически импортируемые изображения

Удалённые изображения

Image

On this page