srcset mengasumsikan image akan ditampilkan pada full viewport width. Bila ingin menampilkan pada ukuran tertentu, gunakan attribute sizes.
NOTE attribute sizes tidak akan mengubah ukuran display, tetap memerlukan css untuk mengubah ukuran display.
Berikut syntax penggunaan sizes, perhatian, angkat 320w dan lainnya, serta isi attribute sizes adalah contoh, bukan angka fixed.
Attribute sizes memiliki syntax pasangan media query dengan ukuran display.
<img srcset="imgsmall.jpg 320w,
imgmedium.jpg 480w,
imglarge.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="imglarge.jpg" alt="alt text goes here">
Syntax diatas memberikan informasi pada browser berapa hal berikut
- image set dengan ukuran natural, yaitu imgsmall.jpg, imgmedium.jpg dan imglarge.jpg
- sizes (max-width:320px) 280 px adalah meminta browser bila lebar viewport <= 320px image akan ditampilkan dengan lebar 280px (ingat note diatas, ini tidak mengubah ukuran display, lakukan sizing melalui css).
- sizes (max-width:480px) 440 px adalah meminta browser bila lebar viewport <= 480px image akan ditampilkan dengan lebar 440px.
- Pada viewport diatas 480xpx, image akan ditampilkan dengan ukuran 800px.
- Bila browser tidak support srcset atau sizes, maka akan fallback menggunakan file yang didefinisikan pada attribute src.
Attribute sizes memberikan informasi tambahan bagi browser, untuk memastikan browser download image yang tepat.
Selain menggunakan ukuran px, dapat juga menggunakan vw (viewport width), contoh: 100vh untuk 100% viewport width