next/image — оптимизированная замена Next.js для тега <img>. Автоматически применяет набор передовых практик оптимизации изображений, которые иначе пришлось бы реализовывать вручную.
tsx
;
() {
(
);
}
next/image — оптимизированная замена Next.js для тега <img>. Автоматически применяет набор передовых практик оптимизации изображений, которые иначе пришлось бы реализовывать вручную.
;
() {
(
);
}
srcset — генерирует несколько размеров, чтобы каждое устройство скачивало нужный.priority).width/height (или fill) резервируют место, чтобы страница не прыгала при загрузке изображения.placeholder="blur" показывает маленький размытый предпросмотр во время загрузки.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Используйте fill (вместо фиксированной ширины/высоты) когда изображение должно заполнить позиционированного родителя — обычно для изображений героя/обложки.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Изображения обычно являются самыми тяжелыми ресурсами на странице и основной причиной низких Core Web Vitals (LCP, CLS). next/image автоматизирует изменение размера, современные форматы, адаптивный srcset, ленивую загрузку и предотвращение сдвига макета — превращая серьёзную задачу оптимизации производительности в один компонент, где priority для изображения LCP — единственная настройка, которую нужно помнить.