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=