Next.js Image srcset Budget

TL;DR: Next.js Image srcset Budget adalah aturan untuk membatasi varian gambar yang di-generate komponen next/image. Setiap breakpoint di deviceSizes dan imageSizes menambah pekerjaan CDN dan menambah cost transfer. Idealnya cukup 4-5 breakpoint utama yang cocok dengan layout produksi, bukan 8 breakpoint default.

Apa itu Next.js Image srcset Budget?

Next.js Image srcset Budget adalah pedoman untuk menyederhanakan srcset yang dibuat otomatis oleh next/image. Default Next.js menghasilkan 8 breakpoint (640, 750, 828, 1080, 1200, 1920, 2048, 3840 px). Untuk situs marketing Indonesia, banyak breakpoint ini tidak pernah dipakai, tapi tetap dihitung di cost optimization image (Vercel) atau image proxy.

Bersama Next.js Image Format Budget dan Next.js Image Bandwidth Budget, srcset Budget melengkapi anggaran teknis untuk semua aset gambar yang masuk halaman.

Pedoman Anggaran

Konfigurasi via next.config.ts:

images: {
  deviceSizes: [480, 768, 1080, 1440, 1920],
  imageSizes: [96, 128, 192, 256]
}

Kenapa Penting?

Setiap breakpoint berarti satu varian gambar yang harus di-generate dan disimpan di cache CDN. Pada situs dengan ratusan gambar, perbedaan 8 vs 5 breakpoint bisa memangkas cost image optimization 30-40 persen. Lihat dokumentasi resmi Next.js di Image Component Configuration.

Pertanyaan Umum

Apakah saya kehilangan kualitas dengan breakpoint lebih sedikit?

Tidak. Browser tetap memilih ukuran terdekat dari srcset. Kuncinya pastikan breakpoint mencakup ukuran yang benar-benar dipakai di CSS Anda.

Bagaimana ukur efek setelah perubahan?

Cek _next/image request di DevTools, hitung berapa varian unik yang dipanggil di lima halaman utama.