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

Согласно Web Almanac, изображения составляют значительную часть общей веса страницы типичного веб-сайта и могут существенно повлиять на производительность LCP вашего сайта.

Компонент изображения Next.js расширяет элемент HTML <img> функциями автоматической оптимизации изображений:

• Оптимизация размера: Автоматически отображает изображения правильного размера для каждого устройства, используя современные форматы изображений, такие как WebP и AVIF.
• Стабильность отображения: Автоматически предотвращает сдвиги макета при загрузке изображений.
• Более быстрая загрузка страниц: Изображения загружаются только тогда, когда они попадают в область просмотра, используя встроенную функцию ленивой загрузки браузера, с необязательными плацехолдерами размытия.
• Гибкость активов: Изменение размера изображений по запросу, даже для изображений, хранящихся на удаленных серверах

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

Использование

import Image from 'next/image'

Затем вы можете определить src для вашего изображения (локального или удаленного).

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

Чтобы использовать локальное изображение, import ваши .jpg, .png, или .webp файлы изображений.

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

import Image from 'next/image'
import profilePic from './me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

Предупреждение: Динамические await import() или require() не поддерживаются. import должно быть статическим, чтобы его можно было проанализировать во время сборки.

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

Чтобы использовать удаленное изображение, свойство src должно быть строкой URL.

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

Атрибуты width и height используются для вывода правильного соотношения сторон изображения и предотвращения сдвига макета при загрузке изображения. width и height не определяют размер отображаемого файла изображения. Подробнее см. Размер изображения.

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

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

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

Подробнее о настройке remotePatterns. Если вы хотите использовать относительные URL для изображения src, используйте loader.

Домены

Иногда вы можете захотеть оптимизировать удаленное изображение, но при этом использовать встроенный API оптимизации изображений Next.js. Для этого оставьте loader в его значении по умолчанию и введите абсолютный URL для свойства изображения src.

Чтобы защитить ваше приложение от злонамеренных пользователей, вы должны определить список удаленных хост-имен, которые вы планируете использовать с компонентом next/image.

Подробнее о настройке remotePatterns.

Загрузчики

Обратите внимание, что в примере выше для локального изображения предоставлен частичный URL ("/me.png"). Это возможно благодаря архитектуре загрузчика.

Загрузчик — это функция, которая генерирует URL для вашего изображения. Он изменяет предоставленный src, и генерирует несколько URL для запроса изображения разных размеров. Эти несколько URL используются при автоматическом создании srcset, чтобы посетители вашего сайта получали изображение правильного размера для их области просмотра.

По умолчанию для приложений Next.js используется встроенный API оптимизации изображений, который оптимизирует изображения из любой точки сети и затем отображает их напрямую с веб-сервера Next.js. Если вы хотите отображать свои изображения напрямую с CDN или сервера изображений, вы можете написать собственную функцию загрузчика несколькими строками JavaScript.

Вы можете определить загрузчик для каждого изображения с помощью свойства loader или на уровне приложения с помощью конфигурации loaderFile.

Приоритет

Вы должны добавить свойство priority к изображению, которое будет главным элементом контента на странице (LCP) для каждой страницы. Это позволяет Next.js специально назначать приоритет загрузки изображения (например, с помощью тегов preload или подсказок приоритета), что приводит к заметному повышению LCP.

Элемент LCP обычно является самым большим изображением или блоком текста, видимым в области просмотра страницы. Когда вы выполняете next dev, вы увидите предупреждение в консоли, если элемент LCP — это <Image> без свойства priority.

После определения изображения LCP вы можете добавить свойство следующим образом:

import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return <Image src={profilePic} alt="Picture of the author" priority />
}

Подробнее о приоритете см. в next/image документации компонента.

Размер изображения

Один из способов, которым изображения чаще всего снижают производительность, — это сдвиг макета, когда изображение сдвигает другие элементы страницы при загрузке. Эта проблема производительности настолько раздражает пользователей, что ей посвящён отдельный индикатор Core Web Vital, называемый накопительным сдвигом макета. Способ избежать сдвигов макета, связанных с изображениями, заключается в указании размеров изображений. Это позволяет браузеру зарезервировать ровно столько места для изображения перед его загрузкой.

Поскольку next/image разработан для обеспечения хороших результатов производительности, он не может использоваться таким образом, чтобы способствовать сдвигу макета, и его необходимо задавать одним из трёх способов:

1. Автоматически, используя статический импорт
2. Явно, включив свойства width и height
3. Неявно, используя fill, который заставляет изображение расширяться, заполняя родительский элемент.

Что делать, если я не знаю размер своих изображений?

Если вы получаете изображения из источника без знания их размеров, вы можете сделать несколько вещей:

Используйте fill

Свойство fill позволяет размеру вашего изображения задаваться родительским элементом. Подумайте о том, чтобы использовать CSS для предоставления родительскому элементу изображения места на странице вместе со свойством sizes для соответствия любому прерыванию медиа-запросов. Вы также можете использовать object-fit с fill, contain, или cover, и object-position, чтобы определить, как изображение должно занимать это место.

Нормализуйте ваши изображения

Если вы отображаете изображения из источника, которым вы управляете, подумайте о том, чтобы изменить свою обработку изображений для нормализации изображений до определенного размера.

Измените ваши API-запросы

Если ваше приложение получает URL-адреса изображений с помощью API-запроса (например, в CMS), вы можете изменить API-запрос, чтобы он возвращал размеры изображения вместе с URL-адресом.

Если ни один из предложенных методов не подходит для указания размеров ваших изображений, компонент next/image хорошо работает на странице вместе со стандартными <img> элементами.

Стиль

Стиль компонента изображения аналогичен стилю обычного <img> элемента, но следует учитывать несколько правил:

• Используйте className или style, а не styled-jsx.
  • В большинстве случаев рекомендуется использовать свойство className. Это может быть импортированный модуль CSS, глобальный стилевой файл и т. п.
  • Также можно использовать свойство style для задания инлайн-стилей.
  • Нельзя использовать styled-jsx, так как он привязан к текущему компоненту (если не отметить стиль как global).
• При использовании fill, родительский элемент должен иметь position: relative
  • Это необходимо для правильного отображения элемента изображения в этом режиме макета.
• При использовании fill, родительский элемент должен иметь display: block
  • Это значение по умолчанию для элементов <div>, но в противном случае должно быть указано явно.

Примеры

Адаптивный дизайн

import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Image
        alt="Mountains"
        // Importing an image will
        // automatically set the width and height
        src={mountains}
        sizes="100vw"
        // Make the image display full width
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}

Заполнение контейнера

import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', height: '400px' }}>
        <Image
          alt="Mountains"
          src={mountains}
          fill
          sizes="(min-width: 808px) 50vw, 100vw"
          style={{
            objectFit: 'cover', // cover, contain, none
          }}
        />
      </div>
      {/* And more images in the grid... */}
    </div>
  )
}

Изображение в качестве фона

import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

Примеры использования компонента Image с различными стилями см. в Демо-версии компонента Image.

Другие свойства

Просмотреть все доступные свойства компонента next/image

Настройка

Компонент next/image и API оптимизации изображений Next.js можно настроить в файле next.config.js. Эти настройки позволяют включить удаленные изображения, определить пользовательские точки разрыва изображений, изменить поведение кэширования и многое другое.

Полное руководство по настройке изображений.