next/image to zoptymalizowana przez Next.js zamiana dla tagu <img>. Automatycznie stosuje cały zestaw najlepszych praktyk dotyczących wydajności obrazów, które w innym przypadku musiałbyś wdrażać ręcznie.
tsx
;
() {
(
);
}
next/image to zoptymalizowana przez Next.js zamiana dla tagu <img>. Automatycznie stosuje cały zestaw najlepszych praktyk dotyczących wydajności obrazów, które w innym przypadku musiałbyś wdrażać ręcznie.
;
() {
(
);
}
srcset — generuje wiele rozmiarów, aby każde urządzenie pobrało odpowiedni.priority).width/height (lub fill) rezerwuje miejsce, aby strona nie przeskoczyła, gdy obraz się załaduje.placeholder="blur" pokazuje małą rozmytą podglądzie podczas ładowania.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Użyj fill (zamiast stałej szerokości/wysokości), gdy obraz powinien wypełnić swoją pozycjonowaną rodzica — powszechne dla obrazów hero/okładki.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Obrazy są zwykle najtrudniejszymi zasobami na stronie i główną przyczyną słabych Core Web Vitals (LCP, CLS). next/image automatyzuje zmianę rozmiaru, nowoczesne formaty, responsywny srcset, leniwego ładowania i zapobieganie przesunięciu układu — zamieniając główne zadanie wydajności w jeden komponent, gdzie priority dla obrazu LCP to jedyne gałęzi, które musisz pamiętać.