Srcset: Cara Gambar Website Tetap Tajam dan Ringan

TL;DR: Srcset adalah atribut HTML yang menyediakan beberapa versi ukuran sebuah gambar, lalu membiarkan browser memilih yang paling pas dengan layar pengguna. Akibatnya, pengunjung ponsel tidak perlu mengunduh gambar berukuran desktop, halaman jadi lebih ringan, dan skor kecepatan membaik. Di Next.js, atribut ini dihasilkan otomatis oleh komponen next/image asalkan properti sizes diatur benar.

Banyak website terasa lambat bukan karena kodenya rumit, melainkan karena satu hal sederhana: gambar yang terlalu besar. Dalam beberapa proyek audit yang saya kerjakan, sumber masalah loading paling sering adalah satu file gambar berukuran 2 MB yang dipaksakan tampil di semua perangkat, termasuk ponsel kelas menengah dengan jaringan terbatas.

Solusinya bukan sekadar mengecilkan gambar sampai buram. Solusinya adalah memberi browser pilihan, lalu membiarkannya mengambil ukuran yang paling efisien. Di sinilah atribut srcset bekerja.

Masalah: Satu Gambar untuk Semua Layar

Cara lama memasang gambar memakai satu file untuk semua orang. File yang cukup tajam di monitor desktop berukuran besar akan menjadi beban tidak perlu di layar ponsel yang jauh lebih kecil. Pengguna seluler tetap mengunduh seluruh data gambar itu, lalu browser mengecilkannya secara visual. Bandwidth terbuang, dan waktu muat ikut membengkak.

Gambar besar adalah penyebab umum buruknya [Largest Contentful Paint](/glosarium/lcp), metrik yang mengukur seberapa cepat elemen utama halaman tampil. Karena LCP termasuk dalam Core Web Vitals, gambar yang berat tidak hanya memperlambat pengalaman, tetapi juga dapat memengaruhi performa SEO.

Solusi: Beri Browser Beberapa Pilihan

Atribut srcset menyediakan daftar versi gambar dengan ukuran berbeda, masing-masing ditandai lebarnya. Atribut pendamping sizes memberi tahu browser seberapa lebar gambar akan ditampilkan pada tiap kondisi layar. Dari dua informasi ini, browser menghitung file mana yang paling efisien.

Praktik yang umum dipakai adalah menyiapkan tiga sampai empat varian ukuran, lalu memasangkannya dengan format gambar modern seperti [WebP](/glosarium/webp) atau AVIF untuk kompresi lebih baik. Detail teknis penerapannya dijelaskan dengan baik di dokumentasi MDN tentang responsive images.

Di Next.js, Ini Sudah Otomatis

Kabar baik untuk pengguna Next.js: komponen next/image menghasilkan srcset dan varian ukuran secara otomatis. Tugas developer menyusut menjadi satu hal penting, yaitu menentukan properti sizes yang benar sesuai layout. Properti sizes yang salah membuat browser memilih ukuran yang tidak optimal, sehingga manfaat srcset tidak maksimal.

Saat membangun Nalesha, toko parfum yang katalognya penuh foto produk, pendekatan ini membantu menjaga halaman tetap ringan meski jumlah gambar banyak. Menggabungkan gambar responsif dengan lazy loading membuat gambar di bawah layar hanya dimuat ketika dibutuhkan, sehingga muatan awal halaman tetap kecil.

Pertanyaan Umum

Apakah srcset menggantikan kompresi gambar?

Tidak. Keduanya saling melengkapi. Srcset memilih ukuran dimensi yang tepat, sedangkan kompresi menurunkan ukuran file tiap varian. Kombinasi keduanya memberi hasil terbaik.

Berapa banyak varian ukuran yang ideal?

Tiga sampai empat varian biasanya cukup untuk menutup rentang ponsel hingga desktop tanpa membuat proses build terlalu berat.

Apakah srcset berpengaruh ke SEO?

Secara tidak langsung, ya. Srcset membantu kecepatan halaman dan LCP, dan kecepatan adalah salah satu sinyal yang dipertimbangkan mesin pencari.

Mulai dari Gambar, Bukan dari Framework

Optimasi performa sering dibayangkan sebagai pekerjaan rumit yang butuh menukar framework. Kenyataannya, perbaikan paling terasa kerap datang dari hal mendasar seperti menyajikan gambar dengan ukuran yang tepat. Sebelum memikirkan optimasi lanjutan, pastikan dulu gambar di halaman Anda tidak memaksa pengguna ponsel mengunduh resolusi desktop.