Materi
Gambar yang lebih besar dari ukuran tampilnya membuang byte. web.dev menghitung ukuran yang dibutuhkan dari dua hal: lebar tampil dalam piksel CSS dan device pixel ratio (DPR), yaitu banyaknya piksel perangkat per piksel CSS. Gambar yang tampil 500 piksel CSS di layar ber-DPR 2 membutuhkan lebar 1000 piksel; di DPR 1 cukup 500.
Atribut srcset memberi peramban daftar kandidat. Dengan deskriptor w, setiap kandidat menyebut lebar asli berkasnya, misalnya teh-800.jpg 800w. Karena lebar tampil baru diketahui setelah tata letak, atribut sizes memberi tahu lebar itu lebih awal: daftar kondisi media dan lebar, dibaca dari kiri, dan nilai terakhir tanpa kondisi menjadi cadangan. web.dev menegaskan deskriptor w tidak bekerja tanpa sizes. MDN menjelaskan peramban lalu memilih berkas pertama yang lebih besar dari ukuran slot itu, dan mengingatkan bahwa saat menguji, berkas yang sudah ada di cache bisa ikut dipilih.
<img src="/foto/teh-800.jpg" alt="Kebun teh berkabut" width="800" height="533"
srcset="/foto/teh-480.jpg 480w, /foto/teh-800.jpg 800w, /foto/teh-1200.jpg 1200w"
sizes="(min-width: 960px) 720px, 100vw">Contoh di atas berarti: pada viewport minimal 960 piksel, gambar tampil 720 piksel CSS; selain itu selebar viewport. Ponsel 390 piksel CSS ber-DPR 2 membutuhkan 780 piksel perangkat, dan teh-800.jpg cukup.
