Cara Pasang Next.js Image Format Budget di Website Bisnis 2026: Kerangka 5 Langkah supaya AVIF dan WebP Memangkas Transfer Gambar

TL;DR: Next.js Image Format Budget adalah aturan format gambar di next/image yang memastikan AVIF dipakai sebagai prioritas, WebP sebagai fallback, dan JPEG/PNG hanya untuk kasus khusus. Tutorial ini menjelaskan 5 langkah konkret pasang Format Budget di proyek Next.js 15, lengkap dengan konfigurasi next.config.ts dan target ukuran per jenis aset.

Dalam beberapa proyek website bisnis terakhir, saya melihat satu pola yang konsisten muncul: tim sudah pakai next/image, tetapi transfer gambar tetap di kisaran 1,5 sampai 2 MB per halaman. Penyebabnya hampir selalu sama, yaitu konfigurasi formats belum diset, sehingga optimizer Next.js default ke WebP saja dan AVIF tidak pernah dipakai meski browser mendukung. Format Budget adalah cara murah menutup gap ini.

Artikel ini menjelaskan 5 langkah praktis menerapkan Format Budget untuk website bisnis Next.js, dengan target turun dari rata-rata 1,4 MB ke 600 KB per halaman dalam dua minggu setelah deploy.

Konteks Masalah Format Gambar di Website Bisnis

Mayoritas website bisnis Indonesia masih serve JPEG mentah berukuran 300 sampai 900 KB per gambar. Padahal sejak Next.js 13, komponen next/image mendukung negosiasi AVIF dan WebP otomatis via header Accept. Tanpa Format Budget eksplisit, optimizer hanya menggunakan WebP, yang masih 20 persen lebih besar dari AVIF di kualitas setara. Ini berdampak ke Core Web Vitals, khususnya LCP hero image dan Next.js Image Bandwidth Budget total halaman.

Kerangka 5 Langkah Pasang Format Budget

Langkah 1: Konfigurasi next.config.ts

const nextConfig = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
}

Urutan array menentukan prioritas. AVIF dulu, lalu WebP sebagai fallback browser yang tidak mendukung.

Langkah 2: Audit aset hero

Buka 5 halaman traffic tertinggi (homepage, halaman produk, halaman layanan). Catat ukuran transfer hero image di tab Network DevTools. Target: di bawah 180 KB untuk hero, 80 KB untuk thumbnail.

Langkah 3: Kebijakan per jenis aset

Bold: format yang dipilih harus sesuai konteks visual, bukan satu format untuk semua. Foto pakai AVIF/WebP. Logo dengan transparansi pakai PNG atau SVG. Animasi pakai video MP4, bukan GIF.

Langkah 4: Quality budget

Set quality={75} di komponen <Image> untuk hero. Selisih visual ke quality={90} hampir tidak terdeteksi mata, tapi ukuran turun 20 persen.

Langkah 5: Verifikasi

Buka Chrome DevTools, tab Network, filter Img. Pastikan kolom Type menunjukkan avif untuk Chrome dan webp untuk Safari versi lama. Jika masih jpeg, optimizer belum aktif.

Studi Kasus Singkat dari Project Vito Atmo

Saat membangun ulang website Nalesha (e-commerce parfum), tim memasang Format Budget di sprint pertama setelah migrasi ke Next.js 15. Hasilnya dalam 14 hari: rata-rata transfer halaman produk turun dari 1,8 MB ke 720 KB, LCP hero turun dari 3,2 ke 1,5 detik di koneksi 4G simulasi. Tidak ada komplain visual dari tim creative. Lihat juga panduan resmi next/image formats.

Pertanyaan Umum

Apakah AVIF memperlambat build time?

Iya, AVIF butuh CPU encode 2 sampai 3 kali lebih lama dari WebP. Tapi karena Next.js cache hasil optimasi di server, dampaknya hanya di first-request, bukan ke build CI.

Bagaimana cara handle gambar dari Supabase Storage?

next/image tetap akan mengoptimalkan, asal domain Supabase sudah ditambahkan di images.remotePatterns config. Format negosiasi tetap berjalan otomatis.

Apakah perlu pasang loader custom?

Tidak, untuk mayoritas kasus. Loader default Next.js sudah cukup. Loader custom hanya perlu jika Anda pakai CDN gambar pihak ketiga (Cloudinary, Imgix).

Penutup

Format Budget bukan optimasi eksotis, tetapi langkah dasar yang sering dilewati. Untuk marketer dan developer Indonesia yang menjalankan website bisnis Next.js, dua baris konfigurasi di next.config.ts bisa memangkas separuh transfer gambar. Mulai dari halaman traffic tertinggi, ukur sebelum dan sesudah, lalu naikkan target setelah baseline stabil.