Next.js Автоматическая оптимизация изображений с помощью компонента next/image

Автор Пушпендра Сингх

Картинка стоит 1000 фраз, а изображения являются жизненно важной частью онлайн-платформ для связи с пользователями. Определить их в их максимальной фундаментальной форме и закончить стандартным элементом очень просто:

<img src="image.jpg">

Обычно мы встраиваем исходное изображение, photo.jpg, в веб-страницу, предполагая, что фотография находится внутри равного списка из-за веб-страницы HTML.

Вы можете — и вы должны — перейти в дополнение к этой канонической форме определения изображения с помощью включения альтернативного текстового содержимого (alt), которое описывает, не может ли изображение быть загружено на альтернативном рендеринге в браузере:

<img src="image.jpg alt="describe the image here"/>

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

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

Исправление для нужд пользователей осуществимо благодаря множеству API-интерфейсов элемента <img> для оптимизации, но они могут оказаться громоздкими для распаковки. Именно здесь автоматическая оптимизация фотографий может принести пользу разработчикам.

В Next.js 10 появилась новая функция автоматической оптимизации изображений

Фреймворки, такие как Next.js, предназначены для решения наиболее распространенных, сложных задач, таких как маршрутизация, интернализация и оптимизация фотографий.

По словам команды, Next.js намерен улучшить две вещи: опыт разработчиков и пользователей. И хотя большая часть оптимизации направлена ​​на сокращение количества JavaScript, отправляемого клиентам, есть и другие компоненты, такие как изображения, которые также нуждаются в оптимизации.

Next.js 10 приветствовал API оптимизации фотографий, next/image, как каноническую форму для встроенной автоматической оптимизации фотографий, встроенный интегрированный 5, интегрированный благослови.

• Улучшенный пользовательский интерфейс. Благодаря отложенной загрузке оптимизированных изображений по умолчанию пользователи могут рассчитывать на общее повышение производительности во время загрузки веб-сайта, что в долгосрочной перспективе улучшит общее взаимодействие с пользователем.
• Хорошее взаимодействие с разработчиком. Благодаря простому в использовании API Next picture разработчики получают расширенный опыт работы с возможностью обрисовать базовую фотографию, настроить ее по своему вкусу или углубиться в более совершенные варианты конфигурации. как кеширование и загрузчики.
• Неизменное время сборки. Количество экземпляров конструкции не увеличивается в результате оптимизации, поскольку Next.js оптимизирует изображения по запросу пользователей, а не во время сборки.
• Современные методы и форматы изображений: изображения по умолчанию загружаются отложенно и могут отображаться в форматах моделей, таких как WebP, в поддерживаемых браузерах.
• Задел на будущее: Next.js также может механически принимать форматы изображений Destiny и показывать их браузерам, которые поддерживают эти форматы.

Использование API следующего/изображения

API next/photo — это конфетка для оптимизации фотографий в next.js. Выдает сообщение Ошибка! Имя файла не указано как обычное неискаженное представление правды, это указывает на то, что вы найдете способы использовать один API для оптимизации изображения в Next.js.

В максимально фундаментальной форме вопрос «Ошибка! Имя файла не указано» в основном аналогична детали HTML «img», потому что они оба имеют характеристики/свойства src и alt:

Функциональность компонента <Image/> может расширяться за счет ряда доступных в нем реквизитов. Давайте посмотрим на них-

- реквизит источника

src — это единственный источник правды для компонента <Image/>. При использовании с изображением он должен быть одним из следующих:

1. Строка курса как внутренний маршрут, как и фрагмент кода выше, в зависимости от загрузчика.
2. Строка маршрута как абсолютный внешний URL-адрес с параметрами области, установленными в next.config.js.
3. Статически импортированный файл изображения

В этом случае мы будем импортировать файл статического изображения:

- Ширина и высота реквизита

Мы измеряем ширину фотографии в пикселях, за исключением статически импортированных фотографий или изображений, имеющих формат prop для заполнения:

- опора погрузчика

Свойство загрузчика — это пользовательская функция, которая разрешает URL-адреса. Учитывая параметры качества, ширины и src, он вернет строку URL-адреса:

- Размеры опоры

Свойство размеров указывает атрибут размера HTML-элемента img.

Приведенный выше код показывает, что если окно просмотра меньше 500 пикселей, используйте ширину 1000 пикселей для источника. С компонентом <Image/> вы можете указать следующие размеры:

Не забудьте определить размеры проще всего при использовании адаптивного или заполняющего макета.

- Качественная опора

Свойство качества предоставляет целочисленный диапазон от 1 до 100, который определяет качество оптимизированного изображения; 1 — наихудшее качество, а сто — наилучшее качество.

По умолчанию 75:

- Приоритетная опора

Изображения не имеют приоритета по умолчанию (из-за того, что они загружаются отложенно), что означает, что приоритет по умолчанию равен false. При приоритете true изображение считается высокоприоритетным и предварительно загруженным.

Это нужно использовать только тогда, когда фотография видна над сгибом.

- Макетная опора

Свойство макета управляет поведением макета изображения в соответствии с размером изменения области просмотра. Полученное значение представляет собой строку встроенного, фиксированного, адаптивного или заполняющего.

Каждая стоимость здания имеет свои нюансы в:

1. Сгенерированные srcSet и размеры
2. Ожидаемое значение отображения или позиции в родительском элементе для соответствующего элемента <Image/>, в котором они используются.
3. Иногда необходимо сочетать с другими реквизитами для правильного поведения

- опора-заполнитель

Когда изображение загружается, заполнитель используется в качестве резервного изображения. Возможные значения для него: размытие или пусто.

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

Однако при использовании размытия свойство blurDataURL действует как заполнитель. Он автоматически заполняется при статическом импорте с типом MIME, то есть png, jpg, WebP и blurDataURL.

- Опора ObjectFit

Свойство objectFit похоже на свойство CSS, подходящее для объекта, которое определяет, насколько большим должно быть изображение, чтобы оно соответствовало его контейнеру. Он используется с layout=fill или изображением с заданной шириной и высотой, и его возможные значения: обложка, заливка, отсутствие и уменьшение масштаба.

- Опора ObjectPosition

Свойство objectPosition похоже на свойство CSS позиции объекта, которое определяет положение изображения в его контейнере. Этот реквизит используется с layout=fill или изображением с шириной и высотой, а также со значением позиции-

- погрузочная опора

Свойство loading похоже на атрибут загрузки HTML-элемента img, который используется для ленивой загрузки. Вероятным значением является строка ленивых или нетерпеливых:

- onLoadingComplete опора

onLoadingComplete — это функция обратного вызова, которая выполняется сразу после полной загрузки изображения и удаления заполнителя:

- опора blurDataURL

Другими словами, blurDataURL prop — это изображение-заполнитель, и нужно помнить, что это будет изображение URL-адреса данных в кодировке base64, которое работает только в сочетании с placeholder="blur":

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

- lazyBoundary опора

Свойство lazyBoundary действует как предельный порог для обнаружения пересечений перед запуском ленивой загрузки. По умолчанию он равен 200px.

- неоптимизированный реквизит

Свойство unoptimized, если оно истинно, действует как замена для изменения качества, размера или формата.

Предостережение с другими свойствами

В дополнение к свойствам, перечисленным выше, другие свойства, переданные компоненту <Image/>, будут переданы базовому объекту img, кроме следующих:

• Декодирование всегда «асинхронно»
• Используйте onLoadingComplete для ссылки
• Вместо srcSet используйте deviceSizes.
• Используйте className для стиля

Заключение

Функциональность изображений в Next.js расширяет возможности пользователей благодаря традиционному революционному, простому в использовании и гибкому API. Это непреднамеренно решает острую потребность в Core Web Vitals и помогает веб-сайтам получить более высокий рейтинг SEO, начиная и заканчивая следующим/изображением.

Спасибо за прочтение!

Нужна помощь с вашим проектом? У нас есть эксперты по JavaScript здесь, чтобы помочь вам исключительно!

Подробнее-

Первоначально опубликовано на https://www.habilelabs.io 26 октября 2021 г.