[whatwg] Problems with width/height descriptors in srcset

[Jeremy Keith]

Simon wrote:
> The width/height descriptors in srcset seem to be difficult for people to get right, even people who read the spec.
> 
> * It's not clear from the syntax that it refers to the viewport size rather than the image size.

Yes, I made this mistake and so did plenty of others. As Matt Wilcox pointed out, we're used to seeing attributes describe the element they are attached to: not as tests for the viewport/device.

> * It's not clear if it's min-width or max-width.

Yes, right now the spec contradicts itself about this. This will get resolved I'm sure, but I want to discuss what use cases the srcset draft will work for.

If I'm taking a "Mobile First" approach to development, then srcset will meet my needs *if* Nw and Nh refer to min-width and min-height.

In this example, I'll just use Nw to keep things simple:

<img src="small.png" srcset="medium.png 600w, large.png 800w">

(Expected behaviour: use small.png unless the viewport is wider than 600 pixels, in which case use medium.png unless the viewport is wider than 800 pixels, in which case use large.png).

If, on the other hand, Nw and Nh refer to max-width and max-height, I *have to* take a "Desktop First" approach:

<img src="large.png" srcset="medium.png 800w, small.png 600w">

(Expected behaviour: use large.png unless the viewport is narrower than 800 pixels, in which case use narrow.png unless the viewport is narrower than 600 pixels, in which case use small.png).

One of the advantages of media queries is that, because they support both min- and max- width, they can be used in either use-case: "Mobile First" or "Desktop First".

Because the srcset syntax will support *either* min- or max- width (but not both), it will therefore favour one case at the expense of the either.

Both use-cases are valid. Personally, I happen to use the "Mobile First" approach, but that doesn't mean that other developers shouldn't be able to take a "Desktop First" approach if they want. By the same logic, I don't much like the idea of srcset forcing me to take a "Desktop First" approach.

Jeremy

P.S. I'm using air-quotes around "Mobile First" and "Desktop First" because it's not really about mobile or desktop; it's about small viewports and large viewports but the terms are fairly common.

-- 
Jeremy Keith

a d a c t i o

http://adactio.com/