Gambar dengan Image
Menampilkan gambar yang otomatis dioptimalkan.
Gambar besar = situs lambat
Foto dari kamera bisa 5 MB. Komponen Image dari Next.js otomatis mengecilkan ukuran, mengubah ke format ringan (WebP), dan memuatnya hanya saat terlihat di layar.
Cara pakai
Taruh gambar di folder public/. File public/foto.jpg diakses dengan alamat /foto.jpg.
import Image from "next/image";
export default function Profil() {
return (
<Image
src="/foto.jpg"
alt="Foto profil"
width={120}
height={120}
/>
);
}Atribut wajib
| Atribut | Arti |
|---|---|
src | Alamat gambar |
alt | Deskripsi gambar (untuk pembaca layar & SEO) |
width, height | Ukuran dalam piksel — mencegah halaman "melompat" saat gambar muncul |
Perhatikan: angka ditulis dengan kurung kurawal: width={120}.