html5 - HTML srcset Specification: Clarification -

i have written javascript filler implement srcset, need clarify specified behaviour.

while srcset allows specify conditions width or resolution, can’t work out whether ok specify both. example:

<img src="images/oh1x408.jpg"     srcset="images/oh1x192.jpg, images/oh1x408.jpg 420w,     images/oh2x192.jpg 2x, images/oh2x408.jpg 2x 420w"> 

this supposed cover single , double resolutions, , smaller , wider screens.

i have seen no examples both width , resolution specified. question is:

• is last image in srcset example above within specs?
• is else in example incorrect?

thanks

no, can specify 1 of both. seems, don't understand how width descriptor works. use width descriptor, won't need x descriptor anymore.

here example:

<img srcset="img-300.jpg 1x, img-600.jpg 2x" /> 

the above example can described width descriptor, this:

<img srcset="img-300.jpg 300w, img-600.jpg 600w" sizes="300px" /> 

srcset resolution switching (no art direction). while density descriptor can handle static width images, width descriptor can handle adaptive images using sizes attribute. width descriptor describes width of each image candidate in physical pixels, sizes attribute describes (different) width(s) of image in layout pixels.

here more complicated example:

<img srcset="img-300.jpg 300w, img-480.jpg 480w, img-720.jpg 720w" sizes="(min-width: 480px) 400px, 100vw" /> 

the example above says have 3 candidates 1 width of 300, 480 , last width of 720 pixels, additionally image displayed @ 400 pixels if viewport min-width: 480px otherwise displayed @ full viewport width (100vw).

the browser automatically calculates width according sizes attribute. example, if looking 360px wide device sizes 100vw taken (because lower 480px) , computed 360px layout pixel. browser calculates density of each candidate division: width descriptor / calculated size):

300 / 360 = 0.83 480 / 360 = 1.34 720 / 360 = 2 

and browser chooses best candidate device depending on pixel ratio of device. takes 480 wide image on 1x device , 720 wide image on 2x device.

and see, don't need use density descriptor anymore. density descriptor shorter version.

---

and yeah, there polyfill handling fine.