Digital Transformation
Srcset
TL;DR: Srcset adalah atribut HTML pada elemen gambar yang menyediakan beberapa versi resolusi sekaligus, sehingga browser bisa mengunduh ukuran yang paling sesuai dengan lebar layar dan kerapatan piksel perangkat. Hasilnya, pengguna ponsel tidak perlu mengunduh gambar berukuran desktop, dan halaman terasa lebih ringan.
Apa itu Srcset?
Srcset adalah cara memberi tahu browser bahwa satu gambar punya beberapa pilihan file, masing-masing dengan ukuran berbeda. Browser kemudian memilih file mana yang paling efisien berdasarkan lebar layar, kerapatan piksel, dan kondisi jaringan. Tanpa srcset, semua pengguna mengunduh satu file yang sama, biasanya versi paling besar, padahal layar ponsel tidak memerlukan resolusi sebesar itu.
Analogi sederhananya seperti penjual yang menyiapkan baju dalam beberapa ukuran. Daripada memaksa semua orang memakai ukuran XL, penjual membiarkan pembeli mengambil ukuran yang pas. Srcset bekerja berdampingan dengan teknik responsive images dan sering dipasangkan dengan format modern seperti WebP untuk kompresi yang lebih baik.
Cara Kerja Srcset
Atribut srcset berisi daftar file beserta penanda lebarnya, misalnya gambar-480w.jpg 480w dan gambar-1200w.jpg 1200w. Penanda w menyatakan lebar asli file dalam piksel. Atribut sizes melengkapi informasi ini dengan memberi tahu seberapa lebar gambar akan ditampilkan di layout pada berbagai ukuran layar.
| Komponen | Fungsi |
|---|---|
srcset | Daftar file + lebar masing-masing (480w, 800w, 1200w) |
sizes | Lebar tampilan gambar di layout untuk tiap breakpoint |
src | Fallback untuk browser lama yang tidak mengenal srcset |
Di ekosistem React dan Next.js, atribut ini biasanya tidak ditulis manual. Komponen next/image menghasilkan srcset dan sizes secara otomatis, sehingga developer cukup menentukan sizes yang benar.
Kenapa Penting?
Gambar sering menjadi penyumbang bobot halaman terbesar, dan gambar yang terlalu besar adalah penyebab umum skor LCP yang buruk. Dalam beberapa proyek e-commerce yang saya tangani, mengganti gambar statis menjadi srcset yang benar memangkas ukuran transfer gambar di ponsel cukup signifikan tanpa mengorbankan ketajaman di desktop. Untuk pasar Indonesia yang mayoritas mengakses lewat seluler dengan kuota terbatas, efisiensi ini berdampak langsung pada pengalaman dan biaya data pengguna.
Pertanyaan Umum
Apa beda srcset dan sizes?
Srcset berisi daftar file gambar beserta lebarnya, sedangkan sizes memberi tahu browser seberapa lebar gambar akan tampil di layout. Keduanya bekerja bersama agar browser memilih file yang tepat.
Apakah saya perlu menulis srcset manual di Next.js?
Tidak. Komponen next/image menghasilkan srcset otomatis. Anda hanya perlu mengatur properti sizes dengan benar sesuai layout.
Istilah Terkait