Nextjs Image Optimization Lanjut Loader Priority Responsive Srcset

Definisi

next/image mengoptimalkan gambar otomatis: resize, format modern (webp/avif), dan srcSet responsif. Opsi lanjut: loader kustom (pakai CDN sendiri), priority untuk above-the-fold, sizes agar browser pilihSOURCE yang tepat, dan fill untuk container responsif.

Kapan dipakai

Pakai next/image untuk semua gambar produksi. priority untuk hero/LCP; fill untuk gambar yang menyesuaikan container (card, background). Jangan pakai <img> biasa kecuali kasus sangat sederhana.

Cara kerja

Dasar + priority

tsx

import Image from 'next/image';
<Image src="/hero.jpg" alt="Hero" width={1200} height={630} priority />

Fill + sizes

tsx

<div style={{ position: 'relative', width: '100%', aspectRatio: '16/9' }}>
  <Image src="/post.jpg" alt="" fill sizes="(max-width:768px) 100vw, 50vw" />
</div>

Loader kustom (CDN)

tsx

const myLoader = ({ src, width }) => `https://cdn.x.com/${src}?w=${width}`;
<Image loader={myLoader} src="img.jpg" width={500} height={500} />

Struktur alur

Catatan implementasi

• sizes penting: tanpa itu, browser asumsikan full viewport → download terlalu besar.
• priority mematikan lazy loading untuk gambar kritis (LCP).
• fill butuh parent position: relative + ukuran; gambar jadi absolute.
• Konfigurasi images di next.config untuk domain remote (remotePatterns).

Kesalahan umum

• Lupa width/height: layout shift; pakai fill atau dimensi eksplisit.
• sizes salah: download gambar tak perlu besar.
• Remote image tanpa remotePatterns: error optimizer.
• priority di terlalu banyak: malah lambat; hanya 1–2 gambar kritis.

Referensi terkait

• Next.js Middleware, Edge Runtime, Image Optimization, Redirect/Rewrites
• Next.js Static Generation, SSR, ISR, Dynamic Rendering
• CSS Responsive Layout: Media Queries, Container Queries