Digital Transformation
Next.js Image Blur Placeholder Budget
TL;DR: Next.js Image Blur Placeholder Budget adalah batas wajar pemakaian properti blurDataURL di komponen next/image. Aturan praktisnya, pakai blur hanya untuk 3 sampai 5 gambar di atas lipatan, dan jaga total inline base64 di HTML di bawah 8 KB supaya halaman tetap ringan.
Apa itu Next.js Image Blur Placeholder Budget?
Next.js Image Blur Placeholder Budget adalah kerangka disiplin untuk memutuskan kapan sebuah gambar perlu blur placeholder dan kapan cukup pakai placeholder kosong. Properti blurDataURL pada komponen next/image memang membantu pengalaman visual, namun setiap blur menambah base64 di HTML yang langsung memengaruhi waktu parsing.
Budget ini tidak ditetapkan Next.js secara resmi, tetapi muncul sebagai praktik internal saat menyusun halaman pilar untuk klien e-commerce kecil di 2026. Setiap kali blur dipakai untuk semua gambar termasuk yang di bawah lipatan, halaman cenderung gemuk dan Largest Contentful Paint terdorong di atas 2,8 detik.
Aturan Praktis
| Posisi gambar | Pakai blur? | Catatan |
|---|---|---|
| Hero atau LCP | Iya, dengan ukuran kecil | Maks 0,8 KB base64 per gambar |
| 3-5 gambar di atas lipatan | Iya | Total inline base64 maks 8 KB |
| Galeri di bawah lipatan | Tidak | Cukup placeholder kosong dan lazy load |
| Thumbnail di list panjang | Tidak | Pakai sizes dan loading lazy |
Pasangkan dengan kontrol Core Web Vitals dan Edge Cache supaya placeholder tidak jadi tambahan beban kalau halaman sudah dilayani dari cache.
Kenapa Penting?
Halaman bisnis Indonesia rata-rata diakses dari koneksi seluler campuran. Saat menyusun katalog WhatsApp untuk klien UMKM di 2026, mengurangi blur placeholder dari 18 gambar jadi 4 gambar saja memangkas ukuran HTML 22 KB dan menurunkan LCP 0,7 detik. Disiplin budget ini membuat tim developer dan marketer punya bahasa yang sama saat menentukan mana gambar yang layak dapat blur.
Pertanyaan Umum
Apakah blur placeholder selalu jelek?
Tidak, blur bagus untuk pengalaman LCP. Yang jelek adalah memakai blur untuk semua gambar tanpa pertimbangan posisi.
Bagaimana cara membuat blurDataURL ringan?
Gunakan utility seperti plaiceholder atau next-image-blur dan kompres jadi 4x4 piksel sebelum di-base64. Hasilnya rata-rata di bawah 800 byte.
Istilah Terkait