Как получить максимум от компонента Next.js

5 способов получить максимум от компонента «Изображение» в Next.js

Большинство из них используют компонент <Image/> из Next JS сам по себе и без каких-либо дополнительных настроек, предполагая, что изображения оптимизированы до максимума сами по себе, что неправильно!

Да, используя компонент <Image/>, вы получаете некоторый уровень оптимизации изображения, но его можно дополнительно оптимизировать в зависимости от ряда факторов.

В этой статье я покажу вам, как это можно сделать, а также дам ссылку на мой репозиторий GitHub, который я использовал для этого исследования.

1. Использование локальных изображений

При использовании локальных изображений вы можете просто импортировать их из общей папки, а поскольку это локальное изображение, вы можете пропуститьдобавление высоты и ширины, так как Next JS вычислит их. отсутствует во время сборки

2. Использование удаленных изображений

Говоря об удаленных изображениях, мы четко понимаем, что нам понадобится строка URL-адреса изображения, которая входит в src={'image-url'}, но вы также должны понимать, что Next JS не имеет доступа к этому изображению при сборке. время, что означает, что он не будет знать ширину и высоту изображения, и, следовательно, нам нужно указать высоту и ширину нужного нам изображения.

3. Удаленные изображения (с размытием при загрузке)

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

заполнитель будет установлен на «размытие», чтобы эффект размытия возник до того, как будут получены полные данные изображения, а blurDataURL будет изображением вашего основного изображения в кодировке base64. который должен быть загружен, и обычно этот base64 довольно мал и будет увеличен в качестве заполнителя для размытого эффекта загрузки.

Примечание: для локальных изображений вам нужно будет использовать только свойство placeholder, установив для него значение «размытие», а blurDataURL можно игнорировать. Next JS выполнит магию за кулисами

4. тип макета

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

• При значении intrinsic размеры изображения уменьшаются для меньших окон просмотра, но сохраняются исходные размеры для больших окон просмотра.
• Когда fixed, размеры изображения не будут изменяться при изменении области просмотра (нет реакции), аналогично собственному элементу img.
• Когда responsive, размер изображения будет уменьшаться для меньших окон просмотра и увеличиваться для больших окон просмотра. Убедитесь, что родительский элемент использует display: block в своей таблице стилей.
• Когда fill, изображение будет растягиваться как по ширине, так и по высоте до размеров родительского элемента, при условии, что родительский элемент является относительным. Обычно это связано со свойством objectFit. Убедитесь, что родительский элемент имеет position: relative в своей таблице стилей.

5. Контролируйте качество изображения, которое вам нужно

Качество оптимизированного изображения, целое число от 1 до 100, где 100 — наилучшее качество. По умолчанию 75.

Итак, это 5 основных способов, которыми вы могли бы эффективно использовать ‹Image /› от Next JS, и ознакомьтесь с репозиторием кода, который я прикрепил ниже, для справки.

Узнать больше