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

Согласно 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 '../public/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'
 
export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
        priority
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

Узнайте больше о приоритете в 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. Эти настройки позволяют включить удалённые изображения, определить пользовательские точки разрыва изображения, изменить поведение кэширования и многое другое.

Подробнее об опциях настройки изображения.