Как Next.js оптимизирует изображения? (Компонент Image, сжатие, форматы)

Question

Компонент next/image автоматически сжимает изображения, конвертирует их в современные форматы (WebP/AVIF), изменяет размеры под нужный макет и lazy load-ит их. Это уменьшает вес страниц и ускоряет их загрузку без усилий со стороны разработчика

YeaHub · Accepted Answer

Компонент — это замена обычному HTML-тегу с мощной оптимизацией "под капотом".Ключевые функции оптимизации:Современные форматы:Next.js автоматически конвертирует изображения в WebP или AVIF (если браузер поддерживает), которые often much smaller than JPEG или PNG при том же качестве.Изменение размера "на лету":Вы указываете только необходимые размеры в макете (width, height).Next.js создает и отдает изображение именно этого размера, а не оригинальное огромное.Lazy Loading по умолчанию:Изображения загружаются только тогда, когда они появляются в viewport (области просмотра), экономя трафик и ускоряя первоначальную загрузку.Приоритизация загрузки:С помощью пропса priority можно пометить изображения, важные для Largest Contentful Paint (LCP) (например, hero-изображение), чтобы загрузить их немедленно.Пример использования:import Image from 'next/image'; export default function Hero() { return (

); }Важные аспекты:Обязательные размеры: Нужно явно указывать width и height для предотвращения Cumulative Layout Shift (CLS).Домены (domains): Для оптимизации изображений с внешних URL их нужно добавить в next.config.js в images.domains.Хостинг: Оптимизация работает на любом хостинге, но максимально эффективна на Vercel.