Digital Transformation
Next.js Image Format Budget
TL;DR: Next.js Image Format Budget adalah aturan internal proyek tentang format gambar mana yang dipakai komponen
next/image. Tujuannya menjaga ukuran transfer tetap kecil sambil tetap kompatibel di browser lama. Default sehat: AVIF sebagai prioritas, WebP sebagai fallback otomatis, JPEG/PNG hanya untuk aset transparan atau kasus khusus.
Apa itu Next.js Image Format Budget?
Next.js Image Format Budget adalah keputusan rekayasa tentang format apa yang boleh diserve oleh next/image di runtime. Komponen next/image mendukung negosiasi format otomatis via header Accept, sehingga browser yang mendukung AVIF mendapat AVIF, sisanya mendapat WebP atau JPEG. Tanpa budget, tim cenderung serve JPEG mentah berukuran 600 sampai 900 KB; dengan budget, satu gambar hero biasanya turun ke 80 sampai 180 KB. Format Budget berhubungan langsung dengan Next.js Image Bandwidth Budget dan Next.js Image LCP Budget karena format yang lebih ringan otomatis menurunkan total transfer dan waktu paint.
Rekomendasi Format Budget
| Konteks | Format prioritas | Catatan |
|---|---|---|
| Foto realistis (hero, portrait) | AVIF, fallback WebP | Hemat 30 sampai 50% dibanding JPEG di kualitas setara |
| Ilustrasi flat dengan teks | WebP, fallback PNG | AVIF kadang merusak edge teks di kualitas rendah |
| Aset transparan (logo) | PNG atau SVG | Hindari konversi paksa ke WebP jika transparansi penting |
| Animasi | Video MP4/WebM via tag video | Jangan pakai GIF, ukurannya 5 sampai 10x lebih besar |
Konfigurasi di next.config.ts:
images: { formats: ['image/avif', 'image/webp'] }
Kenapa Penting?
Berdasarkan praktik di proyek Vetmo (pet care) dan Nalesha (e-commerce parfum), penerapan Format Budget AVIF/WebP menurunkan rata-rata transfer halaman dari 1,8 MB ke 720 KB, dan LCP hero turun dari 3,2 ke 1,5 detik di jaringan 4G. Untuk website bisnis Indonesia yang traffic mobile-nya besar, Format Budget adalah quick win paling murah dibanding refactor framework. Dokumentasi resmi next/image menyebut AVIF butuh lebih banyak CPU saat encode tapi menghasilkan ukuran 20 persen lebih kecil dari WebP.
Pertanyaan Umum
Apakah AVIF aman dipakai default di 2026?
Aman. Per April 2026, dukungan AVIF sudah di atas 94 persen browser global, dan next/image otomatis fallback ke WebP bagi yang tidak mendukung.
Bagaimana dengan SVG?
SVG tidak diproses optimizer next/image secara default. Untuk ikon dan logo, serve langsung dari /public atau pakai komponen SVG inline.
Istilah Terkait