Using 'width' value to determine which resource to pick

[igrigorik]

Currently width is not used in the selection algorithm but, at least in theory, it should work just fine and I'm wondering if we should clarify this in the spec?

<img src="wolf.jpg" width="400" alt="The rad wolf"
     srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">

In above example, the UA should select wolf-400.jpg for 1x devices, wolf-800.jpg for 2x, and so on. Also, note that HTML5 spec says that width must be in CSS px, so there is no need to block on layout, etc.

Also, on a related note.. What happens if I specify both width and sizes? Who wins?

[tabatkins]

The conflict between width and sizes is why we should avoid conflating them. If you want to do this, add a sizes=400 attribute as well, or just write your densities with the x unit, since your image is fixed-width. (The sizes attribute and the w unit exist to handle variable-size images.)

[igrigorik]

Ah, so to confirm, sizes accepts both px (default) and vw units? And if I wanted to provide a fallback:

<img src="wolf.jpg" width="400" sizes="400" alt="The rad wolf"
     srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">

Old browsers would pick up wolf.jpg and display it at 400px based on width, and newer browsers would be smart enough to pick up sizes value and select the right asset based on device DPR. Correct?

[tabatkins]

Yes, sizes accepts all CSS <length> values, and interprets them the same way that MQs do.

Your fallback would indeed work as you described.