Digital Transformation
Responsive Images (srcset)
TL;DR: Responsive images dengan atribut srcset adalah teknik HTML yang menyajikan beberapa versi ukuran gambar, lalu browser memilih yang paling pas dengan lebar layar dan resolusi perangkat. Hasilnya, ponsel tidak perlu mengunduh gambar versi desktop yang berat, sehingga halaman lebih cepat.
Apa itu Responsive Images dengan srcset?
Atribut srcset memberi browser daftar kandidat gambar beserta lebarnya, dan atribut sizes memberi tahu seberapa besar gambar akan ditampilkan. Browser lalu memilih file paling efisien. Teknik ini langsung berdampak pada Core Web Vitals, terutama metrik LCP, karena gambar besar sering jadi elemen paling lambat dimuat. Di framework modern, komponen gambar bawaan biasanya menghasilkan srcset secara otomatis.
Cara Kerja Singkat
| Atribut | Fungsi |
|---|---|
| srcset | Daftar file gambar dan lebarnya |
| sizes | Perkiraan lebar tampil di tiap breakpoint |
| browser | Memilih file paling efisien |
Kenapa Penting?
Gambar adalah penyumbang berat halaman terbesar di banyak situs. Menyajikan ukuran tepat menghemat data dan mempercepat render. Saat mengaudit halaman dengan Lighthouse, gambar yang tidak responsif hampir selalu muncul sebagai rekomendasi perbaikan. Dokumentasi resmi soal ini ada di panduan responsive images MDN. Pada situs yang dibangun dengan SSG, optimasi gambar bisa dilakukan saat build sehingga tidak menambah beban saat halaman diakses.
Pertanyaan Umum
Apakah srcset menggantikan CSS untuk gambar responsif?
Tidak sepenuhnya. srcset memilih file yang tepat, sedangkan CSS mengatur tata letak. Keduanya saling melengkapi.
Format gambar apa yang sebaiknya dipakai?
Format modern seperti WebP atau AVIF umumnya lebih ringan dari JPEG pada kualitas setara, dan didukung mayoritas browser saat ini.
Istilah Terkait