Digital Transformation
Next.js Image Quality Budget
TL;DR: Next.js Image Quality Budget adalah aturan internal yang menetapkan nilai prop quality di komponen next/image sesuai peran gambar di halaman. Hero pakai quality lebih tinggi, thumbnail dan ilustrasi pakai lebih rendah, sehingga transfer ukuran file tetap efisien tanpa kompromi LCP atau bandwidth pengguna mobile.
Apa itu Next.js Image Quality Budget?
Next.js Image Quality Budget adalah disiplin engineering untuk komponen next/image di Next.js 15. Default quality next/image adalah 75. Tanpa budget eksplisit, developer cenderung memakai quality 90 atau 100 untuk semua gambar, hal yang membengkakkan transfer hingga 2 kali lipat tanpa peningkatan kualitas visual yang berarti pada layar mobile. Budget ini menjabarkan quality target per peran: hero LCP 78 hingga 82, content image 70 hingga 75, thumbnail 60 hingga 65, ilustrasi dekoratif 55 hingga 60.
Konsep ini terkait erat dengan Next.js Image Format Budget (pilih AVIF dan WebP) dan Next.js Image Bandwidth Budget (batas total transfer per halaman). Quality budget melengkapi dua budget tersebut di level per-komponen.
Tabel Patokan per Peran
| Peran Gambar | Quality Target | Catatan |
|---|---|---|
| Hero LCP | 78 hingga 82 | Stabil untuk LCP di bawah 2,5 detik |
| Konten utama | 70 hingga 75 | Sweet spot kompresi modern |
| Thumbnail grid | 60 hingga 65 | Cukup untuk ukuran kecil |
| Ilustrasi dekoratif | 55 hingga 60 | Hemat transfer signifikan |
Kenapa Penting?
Dalam beberapa proyek website bisnis yang Vito Atmo bangun pakai Next.js App Router, penerapan quality budget ini menurunkan total transfer gambar mobile sekitar 25 hingga 40 persen tanpa pengguna melaporkan penurunan kualitas visual. Referensi rekomendasi quality dari web.dev memperkuat patokan ini, terutama untuk format modern seperti AVIF.
Pertanyaan Umum
Apakah quality 100 selalu lebih baik?
Tidak. Quality 100 di AVIF dan WebP sering menghasilkan file 2 hingga 3 kali lebih besar dibanding quality 80 tanpa perbedaan visual yang terdeteksi mata. Cap di 82 untuk hero sudah cukup.
Bagaimana kalau brand butuh kualitas tinggi?
Pakai quality 85 hingga 88 untuk gambar product hero, lalu validasi pakai Lighthouse atau PageSpeed Insights. Kalau LCP tetap di bawah 2,5 detik, budget tetap aman.
Istilah Terkait