Digital Transformation
Vercel Image Optimization
TL;DR: Vercel Image Optimization adalah pipeline transformasi gambar otomatis yang aktif saat memakai komponen next/image. Layanan ini mengonversi gambar ke AVIF atau WebP, men-resize sesuai breakpoint, lalu men-cache di edge global. Hasilnya: LCP rata-rata turun 30-50% dibanding tag img biasa.
Apa itu Vercel Image Optimization?
Vercel Image Optimization adalah middleware Vercel yang menangkap request gambar dari komponen next/image, lalu menghasilkan varian gambar optimal untuk setiap perangkat. Layanan ini terintegrasi otomatis di setiap proyek Next.js yang di-deploy ke Vercel, tanpa konfigurasi tambahan. Pendekatannya mirip Cloudinary, tapi terikat pada konvensi Next.js dan tagihan dihitung per source image, bukan per transformasi.
Cara Kerja
Saat browser meminta /img.jpg?w=640&q=75, Vercel:
- Memeriksa cache edge terdekat (TTL default 60 detik untuk gambar remote).
- Bila cache miss, mengambil gambar asli, men-decode, men-resize, mengonversi ke AVIF/WebP sesuai Accept header.
- Menyimpan hasil di edge dan mengirim ke browser dengan header Cache-Control panjang.
| Parameter | Fungsi |
|---|---|
w | Lebar target dalam piksel |
q | Kualitas 1-100, default 75 |
Accept | Browser otomatis kirim, menentukan AVIF/WebP/JPEG |
Komponen next/image memetakan prop sizes ke kombinasi w yang relevan, lalu menghasilkan srcset lengkap. Tag img biasa kehilangan semua optimasi ini.
Kenapa Penting?
Gambar masih jadi penyumbang LCP terbesar di kebanyakan landing page Indonesia. Tag img biasa mengirim file 2-3 MB tanpa konversi, sementara Vercel Image Optimization memangkasnya ke 200-400 KB dengan kualitas visual yang sama. Berdasarkan dokumentasi resmi Vercel, layanan ini menurunkan transfer rata-rata 60% untuk gambar di atas 1 MB.
Dampak ini langsung ke LCP dan skor Core Web Vitals, dua sinyal peringkat Google. Untuk e-commerce dan portfolio dengan banyak gambar, perbaikan LCP 1-2 detik biasanya menaikkan konversi 5-15%.
Pertanyaan Umum
Apakah Vercel Image Optimization gratis?
Free tier 5.000 source image per bulan, di luar itu 5 USD per 1.000 image tambahan per Mei 2026. Source image dihitung unik per URL+query, jadi gambar yang dipakai di 10 ukuran berbeda tetap 1 source.
Apa bedanya dengan Cloudinary atau Imgix?
Vercel terintegrasi nol-konfigurasi dengan next/image dan billing per source image. Cloudinary lebih kaya fitur (cropping AI, filter), tapi billing per transformasi. Untuk proyek Next.js murni, Vercel biasanya lebih murah.
Istilah Terkait