[whatwg] Problems with width/height descriptors in srcset

[Jeremy Keith]

Odin wrote:
>  <img src="small.png" srcset="medium.png 800w, small.png 600w,
>  large.png 92000w">
> 
> I really admit that the 92000w looks really ugly. And if you have a
> viewport that is wider than 92,000 px it will choose the small.png.
> 
> Maybe it should have a Infinite marker for that case. Can't think of a
> beautiful solution there.

Well, right now the spec text says:

"omitted width descriptors and height descriptors are considered to have the value "Infinity""

Does that mean I could ditch the 92000w and just leave it blank?

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

Would that result in this behaviour?:

"Use small.png unless the viewport is less than infinite pixels wide, in which case use large.png, unless the viewport is less than 800 pixels wide, in which case use medium.png, unless the viewport is less than 600 pixels wide, in which case use small.png after all."

I still *must* declare small.png twice (once in src and once again in srcset) but at least I don't have to write an arbitrarily large number for Nw).

This still favours a "Desktop First" approach (where no duplication of image URLs is necessary) but at least a "Mobile First" approach is possible.

Tab wrote:
> Absolutely agreed.  Like several others have suggested, I think we
> should just go with a "min-width:100px" approach, which is much
> clearer.  It also lets us add "max-width", though that may complicate
> the resource choosing algorithm a bit.

Just to be clear, do you mean changing the syntax so that Nw is replaced with min-width:N?

e.g.

<img src="small.png" srcset="medium.png min-width:600px, large.png min-width: 800px">

or

<img src="large.png" srcset="medium.png max-width:800px, small.png max-width: 600px">

Those two examples would then be functionally equivalent (give or take a single pixel) but allow developers to take a "Mobile First" or "Desktop First" approach according to their preference.

Related question: do we still want to keep this unit-less i.e. ditch the "px" from the examples above? Or, if we're going to use this CSS-like syntax anyway, allow other units of measurement (e.g. ems).

Jeremy

-- 
Jeremy Keith

a d a c t i o

http://adactio.com/