next/image je optimalizovanou náhradou Next.js za tag <img>. Automaticky aplikuje sadu osvědčených postupů pro výkon obrázků, které byste jinak museli implementovat ručně.
tsx
;
() {
(
);
}
next/image je optimalizovanou náhradou Next.js za tag <img>. Automaticky aplikuje sadu osvědčených postupů pro výkon obrázků, které byste jinak museli implementovat ručně.
;
() {
(
);
}
srcset — generuje více velikostí, aby každé zařízení stáhlo tu správnou.priority).width/height (nebo fill) rezervuje prostor, aby se stránka nevíchřila při načítání obrázku.placeholder="blur" zobrazuje malý rozmazaný náhled během načítání.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Použijte fill (místo pevné šířky/výšky) když by měl obrázek vyplnit svého umístěného rodiče — běžné pro obrázky hrdiny/obálky.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Obrázky jsou obvykle nejheaviernější aktiva na stránce a hlavní příčinou špatných Core Web Vitals (LCP, CLS). next/image automatizuje změnu velikosti, moderní formáty, responzivní srcset, líné načítání a prevenci posunu rozložení — přeměňuje významnou úlohu výkonu na jednu komponentu s priority pro obrázek LCP jako jediný prvek, který si musíte pamatovat.