Seperti sudah dibahas berulang kali, tidak semua visitor memiliki spesifikasi display yang sama. Baik ukuran maupun resolusi dari display.
Dahulu, pendekatan yang dilakukan adalah menggunakan 1 image yang besar untuk semua display. Pendekatan yang buruk, karena memboroskan bandwidth. Ada juga yang menggunakan pendekatan menggunakan komplek media query, javascript dan server side image selection, terdengar mengerikan bukan?
Sekarang, jangan khawatir, srcset come to rescue, untuk menampilkan image yang sama dengan resolusi yang berbeda dapat digunakan atribut srcset dari tag <img>
Pada pendekatan ini, web developer menyediakan image yang dibutuhkan, dan biarkan browser yang memilih image mana yang tepat berdasarkan viewport dan pixel density.
Caranya pun cukup mudah, berikut syntaxnya
<img src="default-img.jpg"
srcset = "url1 size,
url2 size">
Menggunakan Pixel Density
Browser akan memilih file image yang sesuai dengan pixel density dari display. Developer cukup menunjukan image mana yang densitasnya lebih tinggi dengan angka 1x, 2x dan seterusnya.
<img src="flamingo-fallback.jpg"
srcset="flamingo2x.jpg 2x,
flamingo1x.jpg 1x ">
Menggunakan Image Width
Cara kedua adalah dengan menggunakan lebar natural dari image itu sendiri. Cara ini dianggap lebih baik karena browser menerima informasi lebih lengkap. Browser akan lebih tepat dalam menentukan image yang cocok dengan viewport dan display yang digunakan.
Developer cukup memberikan informasi lebar image, pada contoh adalah 500w, 1000w dan 1500w. Angka tersebut adalah ukuran real lebar dari image itu sendiri.
<img src="gym-girl-small.jpg"
srcset="gym-girl-small.jpg 500w,
gym-girl-medium.jpg 1000w,
gym-girl-large.jpg 1500w" alt="sit-up" />
Dapat dilihat pada gambar diatas, pada emulator, iPhone 5/SE browser menggunakan versi small, pada Galaxy 5 menggunaka versi medium, sementara pada desktop digunakan versi large.
Kelebihan pendekatan srcset ini, browser hanya akan mendownload image yang digunakan, jadi akan menghemat bandwidth dan mempercepat download.
Karena keterbatasan pada codepen, untuk file contoh, silakan download disini