← Next.js44 / 57
Komponen next/image
Komponen <Image> dari next/image otomatis melakukan konversi ke WebP/AVIF, resizing sesuai viewport, dan pemuatan lazy loading.
👀 Contoh dulu
import Image from "next/image";
<Image src="/logo.png" alt="Logo" width={100} height={50} />Hasilnya: Gambar dimuat sangat cepat dan mencegah Cumulative Layout Shift (CLS).
💡 Atribut width dan height wajib diisi untuk mendefinisikan rasio aspek.
📝 Sekarang giliranmu
Kita ingin menampilkan logo di header tanpa menyebabkan Layout Shift. Gunakan komponen <Image> yang telah diimpor dengan properti src="/banner.png", alt="Banner", width={800}, dan height={400}.
Preview