Cara Pasang Next.js Image Quality Budget di Website Bisnis 2026: Kerangka 5 Langkah supaya Transfer Gambar Mobile Turun Tanpa Korban Visual

TL;DR: Next.js Image Quality Budget menetapkan nilai prop quality per peran gambar di komponen next/image. Hero LCP 78 hingga 82, konten 70 hingga 75, thumbnail 60 hingga 65, ilustrasi 55 hingga 60. Penerapan kerangka 5 langkah ini di beberapa proyek website bisnis Indonesia menurunkan transfer mobile sekitar 25 hingga 40 persen tanpa keluhan kualitas visual.

Di banyak proyek website bisnis berbasis Next.js 15 yang Vito Atmo audit selama 2026, ada pola pengulangan yang sama. Tim engineering memakai default quality={75} atau menaikkan ke 90 untuk semua gambar tanpa pertimbangan peran. Hasilnya, halaman dengan 15 gambar mobile bisa transfer 1,8 MB hanya untuk gambar, sementara LCP melar di atas 3 detik.

Kerangka berikut adalah hasil iterasi dari proyek Atmo (LMS), Vetmo (pet care), dan Nalesha (e-commerce parfum). Tidak ada yang ajaib, hanya disiplin menetapkan quality target per peran gambar dan menegakkannya di code review.

Mengapa Default Quality 75 Tidak Cukup

Default quality={75} di next/image memang sweet spot umum, tapi tidak optimal untuk dua kondisi. Pertama, gambar hero LCP yang butuh quality sedikit lebih tinggi (78 hingga 82) untuk menjaga kesan brand di first impression. Kedua, thumbnail kecil dan ilustrasi dekoratif yang sebenarnya bisa turun ke 55 hingga 65 tanpa terlihat berbeda. Tanpa budget eksplisit, semua gambar terjebak di 75, hal yang membuat halaman lebih berat dari seharusnya.

Kerangka 5 Langkah

1. Inventarisasi Peran Gambar

Buat daftar setiap komponen yang memuat gambar: HeroSection, ProductCard, BlogThumbnail, IllustrationBlock. Tandai mana yang berkontribusi ke LCP, mana yang di-lazy load. Tahap ini kelihatan remeh, tapi tanpa peta peran gambar, budget hanya jadi angka tanpa konteks.

2. Tetapkan Tabel Quality Target

Tabel ini disepakati tim, lalu disimpan di docs/image-quality-budget.md supaya bisa dijadikan rujukan code review. Cantumkan di README repository.

3. Refactor Prop quality di Komponen

Tambahkan prop quality eksplisit di setiap next/image. Contoh di komponen Hero:

<Image src={src} alt={alt} fill quality={80} priority sizes="100vw" />

Tidak boleh ada next/image yang tidak menyebut quality. Ini memaksa developer berhenti dan memilih sesuai budget.

4. Validasi dengan Lighthouse dan Real Device

Jalankan Lighthouse mobile di halaman beranda dan dua halaman content pilar. Cek metrik LCP, transfer ukuran, dan Speed Index. Lakukan juga test di device mid-tier (misalnya Redmi Note 11 atau iPhone SE) untuk konfirmasi tidak ada degradasi visual. Saat membangun Nalesha, validasi device fisik menemukan dua kasus thumbnail produk parfum yang quality 60 terlihat pixelated, kami naikkan ke 65 dan masalah selesai.

5. Pasang Guard di Code Review

Tambahkan checklist PR: "Apakah setiap next/image punya quality eksplisit sesuai tabel budget?" Optional, pasang ESLint rule custom untuk warn jika quality tidak di-set. Lihat panduan resmi Next.js Image Optimization untuk konfigurasi tambahan.

Studi Kasus Atmo LMS

Saat tim Atmo merilis modul kursus baru, halaman daftar kursus memuat 24 thumbnail. Quality awal 75 untuk semua, total transfer mobile 1,4 MB, LCP 3,1 detik. Setelah penerapan budget (hero 80, thumbnail 62), transfer turun ke 820 KB dalam 12 hari iterasi. LCP turun ke 1,8 detik. Tidak ada feedback negatif soal kualitas visual dari 3.200 user yang ikut kursus dalam dua minggu pertama setelah rilis.

Pertanyaan Umum

Berapa lama implementasi 5 langkah ini?

Untuk website bisnis dengan 20 hingga 40 komponen, biasanya 3 hingga 5 hari sprint. Sebagian besar waktu untuk inventarisasi peran dan refactor prop, bukan untuk validasi.

Apakah quality budget bertabrakan dengan format budget?

Tidak. Quality dan format adalah dimensi yang berbeda. Pakai AVIF atau WebP plus quality target, keduanya saling menguatkan. Lihat Next.js Image Format Budget untuk patokan format.

Bagaimana kalau klien minta quality 95 untuk semua gambar?

Tunjukkan demo perbandingan AVIF quality 80 vs 95 di layar mobile. Selisih visual nyaris tidak terlihat, sementara file size beda 2 kali lipat. Argumen objektif lebih kuat dari debat preferensi.

Apakah quality budget berlaku juga untuk SVG?

Tidak. SVG vektor tidak punya prop quality. Budget ini khusus raster (PNG, JPG, AVIF, WebP) yang ditangani komponen next/image.

Penutup

Quality budget bukan tentang menurunkan kualitas, tapi soal mengalokasikan transfer ke gambar yang benar-benar butuh fidelitas tinggi. Dengan disiplin per peran, website bisnis Indonesia bisa menjaga pengalaman visual sambil memangkas bounce rate mobile, terutama di jaringan 4G yang tidak stabil.