next/image adalah pengganti yang dioptimalkan Next.js untuk tag <img>. Ini secara otomatis menerapkan serangkaian praktik terbaik kinerja gambar yang jika tidak demikian akan Anda implementasikan secara manual.
tsx
;
() {
(
);
}
next/image adalah pengganti yang dioptimalkan Next.js untuk tag <img>. Ini secara otomatis menerapkan serangkaian praktik terbaik kinerja gambar yang jika tidak demikian akan Anda implementasikan secara manual.
;
() {
(
);
}
srcset responsif — menghasilkan berbagai ukuran sehingga setiap perangkat mengunduh yang tepat.priority).width/height yang diperlukan (atau fill) mereservasi ruang sehingga halaman tidak melompat saat gambar dimuat.placeholder="blur" menampilkan pratinjau buram kecil saat memuat.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Gunakan fill (alih-alih lebar/tinggi tetap) ketika gambar harus mengisi induk yang diposisikan — umum untuk gambar hero/sampul.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Gambar biasanya merupakan aset terberat di halaman dan penyebab utama Core Web Vitals yang buruk (LCP, CLS). next/image mengotomatisasi pengubahan ukuran, format modern, srcset responsif, pemuatan malas, dan pencegahan pergeseran tata letak — mengubah tugas kinerja utama menjadi satu komponen, dengan priority untuk gambar LCP menjadi satu-satunya tombol yang harus Anda ingat.