Digital Transformation
Next.js Image Formats Budget
TL;DR: Next.js Image Formats Budget adalah keputusan format gambar (AVIF, WebP, JPEG) di
next.config.jsyang menyeimbangkan kualitas visual, ukuran transfer, dan biaya CPU. Konfigurasi default Next.js 15 sudah memprioritaskan AVIF lalu WebP, tetapi tim sering perlu menyesuaikan agar tidak meledakkan biaya transformasi gambar di Vercel atau membuat halaman lambat di perangkat lama.
Apa itu Next.js Image Formats Budget?
Next.js Image Formats Budget adalah aturan tim tentang format mana saja yang boleh dipakai komponen next/image di sebuah project, beserta urutan prioritasnya. Konfigurasinya hidup di images.formats pada next.config.js, biasanya ['image/avif', 'image/webp']. Bedanya dengan Next.js Image Priority Budget yang membatasi jumlah gambar priority, Formats Budget mengatur format file yang dihasilkan optimizer.
Analoginya seperti memilih bahasa kemasan untuk satu produk. AVIF adalah kemasan paling kecil tapi butuh mesin baru untuk membongkar. WebP lebih lega tapi dukungannya lebih luas. JPEG fallback untuk perangkat lama.
Cara Menyusun Budget
| Format | Hemat ukuran | Biaya CPU build | Catatan |
|---|---|---|---|
| AVIF | 40 sampai 50 persen vs JPEG | Tinggi | Aman untuk Chrome, Edge, Safari 16,4+ |
| WebP | 25 sampai 35 persen vs JPEG | Sedang | Dukungan luas di mobile Android Indonesia |
| JPEG fallback | Baseline | Rendah | Wajib untuk audience yang masih pakai browser lama |
Pertimbangkan juga Core Web Vitals Budget saat menentukan kualitas (quality) dan deviceSizes.
Kenapa Penting?
Format gambar punya dampak besar ke LCP (Largest Contentful Paint) dan biaya bandwidth Indonesia yang masih sering pakai paket data kuota. Tim yang aktif memakai AVIF + WebP biasanya menurunkan transfer gambar 20 sampai 35 persen tanpa kehilangan kualitas visual. Tetapi tanpa budget yang jelas, pemakaian Vercel Image Optimization bisa naik signifikan, terutama untuk halaman katalog dengan banyak gambar produk.
Pertanyaan Umum
Apakah AVIF wajib di setiap project?
Belum tentu. Untuk audience yang banyak memakai browser lama atau perangkat low-end, WebP lebih aman. AVIF jadi pilihan kalau audience dominan di browser modern dan kualitas visual jadi prioritas.
Apakah ini menggantikan optimasi sumber gambar?
Tidak. Format optimal tetap perlu sumber gambar yang rasio dan resolusinya tepat. Format budget hanya tahap akhir, bukan pengganti audit gambar.
Istilah Terkait