Optimasi Gambar dengan next/image

Masalah gambar biasa

Tag <img> biasa memuat file asli apa adanya. Foto 5MB dari kamera ikut terkirim 5MB ke HP user. Selain itu, gambar yang belum dimuat bikin teks lompat-lompat (layout shift) saat gambar muncul.

Komponen Image

Ganti <img> dengan Image dari next/image:

// app/page.tsx
import Image from "next/image";

export default function Home() {
  return (
    <Image
      src="/hero.jpg"
      alt="Foto hero"
      width={1200}
      height={600}
      priority
    />
  );
}

Next.js otomatis: menyajikan ukuran yang pas dengan layar, mengonversi ke format modern (WebP/AVIF), lazy load gambar di bawah lipatan, dan mencadangkan ruang agar layout tidak bergeser.

Gambar dari URL eksternal

Untuk gambar dari domain luar (misal API), daftarkan domainnya di konfigurasi:

// next.config.mjs
export default {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "cdn.example.com" },
    ],
  },
};

Kapan pakai priority

Tambahkan priority hanya untuk gambar hero yang terlihat pertama kali (LCP). Jangan pakai di semua gambar karena mematikan lazy load dan memperlambat halaman.

Tips praktis

Simpan gambar di public/ dengan nama deskriptif seperti hero-produk.webp, bukan IMG_20240101.jpg. Untuk gambar yang tampil beda ukuran di mobile dan desktop, pakai prop sizes agar browser mengunduh ukuran yang paling pas. Ini bisa memangkas ratusan kilobyte per halaman di HP.

Kesalahan umum pemula

• Tetap memakai <img> biasa. Kehilangan semua optimasi: tidak ada resize otomatis, tidak ada format modern, tidak ada lazy load.
• priority di semua gambar. Ini mematikan lazy load dan memperlambat halaman. Hanya untuk gambar hero/LCP.
• Lupa width dan height. Tanpa dimensi, browser tidak bisa mencadangkan ruang dan layout bergeser (CLS buruk).

Latihan singkat

1. Ganti semua <img> di project latihamu dengan Image, isi width, height, dan alt yang deskriptif.
2. Buka DevTools tab Network, filter "Img", dan bandingkan ukuran file yang diunduh sebelum dan sesudah memakai next/image.

Rangkuman

• Image dari next/image otomatis resize, konversi format modern, dan lazy load.
• Wajib isi width dan height (atau fill) untuk mencegah layout shift.
• Daftarkan domain eksternal di next.config.mjs via remotePatterns.
• priority hanya untuk gambar hero/LCP, bukan semua gambar.

Catatan teknis: width dan height wajib diisi (atau pakai fill) agar Next.js bisa menghitung rasio aspek dan mencegah layout shift. Tanpa ini, skor Core Web Vitals-mu (CLS) akan jeblok dan peringkat SEO ikut turun.