Автоматическая оптимизация изображений
Неоптимизированные изображения
Используя обычный HTML, мы добавили наше главное изображение следующим образом:
<img src="large-image.jpg" alt="Large Image" />Однако это означает, что нам нужно вручную оптимизировать несколько аспектов:
- Обеспечение адаптивности изображения для экранов разных размеров.
- Оптимизация изображений с помощью сторонних инструментов или библиотек.
- Ленивая загрузка (lazy-loading) изображений при их появлении в области просмотра.
Компонент Image
Next.js предоставляет компонент Image, который может автоматически выполнять эти оптимизации.
next/image — это расширение HTML-элемента img, адаптированное для современного веба.
Это означает, что изменение размера, оптимизация и обслуживание изображений в современных форматах, таких как WebP (если браузер поддерживает его), могут выполняться автоматически с помощью next/image.
Компонент предотвращает загрузку больших изображений на устройства с маленькими экранами и позволяет Next.js использовать будущие форматы изображений, обслуживая их браузерам с поддержкой таких форматов.
Автоматическая оптимизация изображений работает с любым источником. Даже если изображение размещено на внешнем источнике данных, например в CMS, его всё равно можно оптимизировать.
Как работает автоматическая оптимизация изображений?
Оптимизация по запросу
Вместо оптимизации изображений во время сборки Next.js оптимизирует их по запросу пользователей. В отличие от генераторов статических сайтов и чисто статических решений, время сборки не увеличивается независимо от того, загружаете ли вы десять изображений или десять миллионов.
Ленивая загрузка изображений
По умолчанию изображения загружаются лениво. Скорость страницы не страдает из-за изображений, находящихся за пределами области просмотра. Изображения загружаются только при попадании в зону видимости.
Избегание CLS
Изображения всегда рендерятся, чтобы избежать кумулятивного сдвига макета (Cumulative Layout Shift, CLS).
Использование компонента Image
Давайте обновим приложение, используя next/image для отображения нашего главного изображения. Свойства height и width должны соответствовать желаемому размеру отображения с таким же соотношением сторон, как у исходного изображения.
Откройте файл pages/index.js и добавьте импорт Image из next/image в начало файла:
import Image from 'next/image';Затем замените главное изображение img на компонент Image:
// До
<img src="large-image.jpg" alt="Large Image" />
// После
<Image src="/large-image.jpg" alt="Large Image" width={3048} height={2024} />Также есть изображение в подвале. Давайте заменим и его:
// До
<img src="/vercel.svg" alt="Vercel Logo" />
// После
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />Наконец, запустите ещё один отчёт Lighthouse в Chrome DevTools и сравните результаты.