Digital Transformation
Image srcset
TL;DR: srcset adalah atribut HTML pada tag
<img>yang menyediakan beberapa versi gambar dengan resolusi berbeda. Browser memilih file paling pas berdasarkan viewport dan device pixel ratio. Hasilnya, ukuran transfer bisa turun 40 sampai 70 persen di mobile tanpa kehilangan kualitas visual.
Apa itu srcset?
srcset adalah bagian dari spesifikasi HTML5 untuk responsive image. Atribut ini memberi browser opsi, bukan instruksi tetap. Browser yang memutuskan file mana yang diunduh berdasarkan ukuran layar, resolusi, dan kondisi jaringan. Komponen <Image> Next.js mengeluarkan srcset otomatis.
Cara Kerja
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Hero produk"
/>
Atribut srcset mendeklarasikan kandidat. Atribut sizes memberi tahu browser berapa lebar gambar di layout. Kombinasi keduanya membuat browser bisa hitung file terhemat.
| Skenario | Tanpa srcset | Dengan srcset |
|---|---|---|
| Mobile 360 px | Download 1600 px (300 KB) | Download 400 px (45 KB) |
| Tablet 768 px | Download 1600 px (300 KB) | Download 800 px (110 KB) |
| Desktop retina | Download 1600 px (300 KB) | Download 1600 px (300 KB) |
Kenapa Penting?
Untuk e-commerce Indonesia, gambar produk adalah penyumbang terbesar LCP. Dalam proyek Nalesha (e-commerce parfum), implementasi srcset via Next.js Image menurunkan transfer halaman listing dari 2,4 MB ke 780 KB di mobile, memangkas LCP sekitar 38 persen.
Pertanyaan Umum
Apakah srcset menggantikan src?
Tidak. Atribut src tetap dibutuhkan sebagai fallback untuk browser lama atau saat srcset gagal dimuat.
Berapa varian srcset yang ideal?
Biasanya 3 sampai 5 varian, mulai dari ukuran mobile (400 px) sampai desktop retina (1600 sampai 2000 px). Lebih dari itu tidak menambah manfaat berarti.
Istilah Terkait