Responsive Images

TL;DR: Responsive images adalah pendekatan menyajikan gambar dengan ukuran dan format yang menyesuaikan layar pengguna, biasanya melalui atribut srcset dan sizes pada elemen img atau picture. Teknik ini penting untuk menjaga skor LCP tetap baik di mobile, sekaligus mengurangi bandwidth.

Apa itu Responsive Images?

Responsive images adalah teknik dalam pengembangan web di mana satu gambar dikirim dalam beberapa varian ukuran, lalu browser memilih varian paling tepat berdasarkan ukuran layar, resolusi, dan jenis koneksi. Implementasi standar memakai atribut srcset dan sizes pada elemen <img>, atau elemen <picture> untuk kontrol lebih granular. Pendekatan ini menjadi fondasi utama image optimization modern dan bagian dari praktik web cepat yang diukur lewat Core Web Vitals.

Cara Kerja Responsive Images

Saat browser memuat halaman, ia membaca atribut srcset yang berisi daftar URL gambar dengan ukuran (misal 480w, 768w, 1200w). Atribut sizes memberitahu browser perkiraan ukuran tampilan gambar di layout (misal "(max-width: 768px) 100vw, 50vw"). Berdasarkan kombinasi itu, browser memilih file paling efisien. Format gambar modern seperti WebP dan AVIF bisa dikombinasikan dengan elemen <picture> untuk fallback otomatis ke JPEG di browser lama. Framework modern seperti Next.js menyediakan komponen <Image> yang otomatis menghasilkan srcset, sizes, dan format adaptif. Detail teknis lengkapnya tersedia di dokumentasi MDN tentang responsive images.

Kenapa Penting?

Bagi website bisnis Indonesia di mana 70 hingga 85 persen traffic datang dari mobile, responsive images bisa memangkas bobot halaman 40 hingga 60 persen tanpa kehilangan kualitas visual di desktop. Dalam beberapa proyek website klien seperti Vetmo (pet care) dan Nalesha (e-commerce parfum), pemakaian next/image dengan strategi sizes yang tepat menurunkan ukuran halaman dari 2,8 MB ke 900 KB di mobile, dan menggeser LCP dari 4,2 detik ke 1,9 detik di 4G median. Hasil ini bervariasi tergantung kondisi awal, ukuran gambar asli, dan kualitas CDN yang dipakai.

Pertanyaan Umum

Apakah srcset bisa dipakai bersama lazy loading?

Bisa. Atribut loading="lazy" bekerja independen dari srcset. Kombinasi keduanya memberi efek terbaik untuk gambar di bawah lipatan.

Format mana yang paling baik, WebP atau AVIF?

AVIF biasanya menghasilkan file 20 hingga 30 persen lebih kecil dari WebP pada kualitas serupa, tapi dukungan browser AVIF belum semuniversal WebP. Pakai <picture> dengan AVIF sebagai pilihan utama dan WebP sebagai fallback.

Apakah semua gambar wajib responsive?

Tidak. Ikon kecil, logo, dan thumbnail dengan ukuran tetap di semua layar tidak butuh srcset. Fokuskan optimasi pada hero image, featured image, dan gambar yang dominan secara visual.