Удивительные изображения для предварительного просмотра с Next.js и LQIP Modern

Загрузка изображений занимает много времени и может иметь разрушительное влияние на UX. Сегодня мы рассмотрим создание изображений для предварительного просмотра с помощью библиотеки под названием lqip-modern.

Что такое ЛКИП?

LQIP означает просто Low Quality Image Placeholders. Они имеют очень маленький размер файла и действуют как заполнители для фактического изображения, пока фактическое изображение все еще загружается. Эти чрезвычайно маленькие размеры файлов получаются путем размытия изображения, изменения его размера до меньшего размера или снижения качества в случае файлов JPEG.

Совместимость

WebP поддерживается всеми современными браузерами. Кроме того, поддержка WebP присутствует в Safari на macOS, только если вы используете macOS 11 (Big Sur) или более позднюю версию. "источник"

Если целью является 100% совместимость, мы также можем использовать JPEG LQIP (они почти в 2–3 раза больше размера изображения WebP).

Давайте теперь посмотрим, как мы можем использовать lqip-modern с Next.js.

Использование LQIP Modern с Next.js

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

Здесь также есть ограничение нашего подхода, то есть изображения для предварительного просмотра создаются во время сборки. Это означает, что если внешнее изображение изменится, то изображение превью не изменится.

Однако этот метод будет особенно полезен, если вы загружаете изображение из CMS. Если изображение когда-либо обновлялось, может быть запущена сборка, которая создаст новое изображение для предварительного просмотра. Лучшим подходом было бы использование добавочной статической регенерации по запросу или регулярной добавочной статической регенерации, однако это выходит за рамки данной статьи. Вы можете прочитать мой пост в блоге о реализации инкрементной статической регенерации по запросу с помощью Directus, чтобы узнать больше.

В этом примере мы рассмотрим создание изображений предварительного просмотра для изображения из Unsplash. Я собираюсь использовать это потрясающее изображение кружки Vercel вместе с некоторыми компьютерными периферийными устройствами для этого урока. Однако вы можете выбрать любую понравившуюся картинку.

Во-первых, давайте создадим новое приложение Next.js —

npx create-next-app next-lqip-demo
# OR
yarn create next-app next-lqip-demo

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

Теперь откройте файл pages/index.js и замените его следующим кодом:

Кроме того, замените код внутри next.config.js следующим:

Мы используем компонент next/image, чтобы показать наше изображение из Unsplash. Поскольку изображение взято с удаленного URL-адреса, мы также должны добавить домен в next.config.js.

Теперь запустите npm run dev или yarn dev, чтобы запустить сервер разработки, а затем посетите localhost:3000. Вы сможете увидеть заголовок страницы с изображением -

Когда вы впервые посетили страницу, вы бы заметили, что изображение загружается за долю секунды. В зависимости от вашего интернет-соединения, оно может быть быстрым или медленным. Если у вас есть быстрое подключение к Интернету, откройте инструменты разработчика и перейдите на вкладку «Сеть». Здесь вы можете ограничить свое интернет-соединение, чтобы имитировать медленную загрузку -

Использование LQIP для оптимизации нашего удаленного образа

Во-первых, давайте установим lqip-modern и sharp. Sharp — отличный пакет, который помогает с преобразованием изображений и используется lqip-modern -

npm install --save lqip-modern sharp
# OR
yarn add lqip-modern sharp

Теперь замените код в pages/index.js следующим:

В getStaticProps мы сначала получаем изображение и конвертируем его в буфер. Затем мы передаем lqip-modern наш буфер, и он возвращает нам объект с именем previewImage, который содержит буфер и некоторые метаданные. Внутри метаданных есть поле dataURIBase64, которое является URL-адресом base64 для нашего изображения для предварительного просмотра. Мы передаем это через реквизиты нашему клиентскому приложению.

На стороне клиента мы добавили новый параметр placeholder="blur" в наш компонент Image, который будет отображать заполнитель размытия. Поскольку это удаленное изображение, нам необходимо передать параметр blurDataURL. Мы передаем URL-адрес base64 для нашего изображения для предварительного просмотра, которое мы получили из метаданных ранее, здесь.

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

Для тех, кому интересно, это изображение, которое нам сделал lqip-modern -

Он крошечный, всего 11x16 (компонент next/image заполняет всю ширину и высоту исходного изображения) и всего 78 байт!

Использование JPEG вместо WebP

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

Изображение JPEG имеет те же размеры, что и наше изображение WebP, но значительно больше по размеру (303 байта).

Обратите внимание, что эти размеры файлов будут различаться в зависимости от того, какое изображение вы используете. Разница в размере файла между JPEG и WebP в некоторых случаях может удвоиться.

Заключение

Хорошо, это так! Давайте рассмотрим, что мы сделали в этом уроке -

  • Узнал об образах LQIP
  • Создал приложение Next.js и добавил изображение из Unsplash
  • Используется lqip-modern для создания изображений предварительного просмотра
  • Посмотрел, как мы можем получить изображения для предварительного просмотра в формате JPEG.

Надеюсь, вам понравился этот урок! Поделитесь, если вы нашли это полезным :)

Важные ссылки

Первоначально опубликовано на https://blog.anishde.dev.