next/image minangka ganti optimisasi Next.js kanggo tag <img>. Otomatis nerapake serangkaian praktik terbaik kinerja gambar sing bakal sampeyan jalani kanthi manual.
tsx
;
() {
(
);
}
next/image minangka ganti optimisasi Next.js kanggo tag <img>. Otomatis nerapake serangkaian praktik terbaik kinerja gambar sing bakal sampeyan jalani kanthi manual.
;
() {
(
);
}
srcset responsif — ngasilake macem-macem ukuran supaya saben piranti ngundhuh sing tepat.priority).width/height wajib (utawa fill) nyimpen papan supaya kaca ora mlorot nalika gambar ngemot.placeholder="blur" nampilake pratinjau samar-samar cilik nalika ngemot.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Gunakake fill (tinimbang width/height tetep) nalika gambar kudu mengisi parental sing irah-irahan — umum kanggo gambar pahlawan/tutup.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Gambar biasane minangka aset sing paling abot ing kaca lan panyebab utama Core Web Vitals sing ala (LCP, CLS). next/image otomatis ngganti ukuran, format modern, srcset responsif, lazy loading, lan pencegahan geseran tata letak — ngganti tugas kinerja utama dadi komponen tunggal, karo priority kanggo gambar LCP minangka kenob siji-sijine sing kudu sampeyan elinga.