[whatwg] Media queries, viewport dimensions, srcset and picture

[Aaron Gustafson]

<<<

Given a set of images of different qualities, browsers can have fairly
advanced heuristics to pick the right one. For example switching from low
res to high res halfway through the rendering of the page if the device is
high resolution and the bandwith just went from bad to good and the
latency is low enough. Most authors are not going to bother writing media
queries of that complexity, and as media queries are stateless, even if
they wanted they couldn't be as sophisticated as browsers. This gets even
more true if you consider zooming.

Having said all that, I think srcset="foo.jpg 1x, foo2.jpg 2x" is quite
good, because it does indeed provide the browser with a set of images with
different quality, leaving it free to pick the appropriate one.

On the other hand, I think that including 600w 400h in there is misguided.
It doesn't help for the problem of picking the right image for the right
resolution/bandwidth combination, but is too crippled to be useful as
media queries meant to serve different images to in different scenarios.
<picture> serves these use cases much better.

Here's what I think we should do:

1) simplyfy srcset to only accept the *x qualifier

2) add support for srcset as an attribute of the <source> sub-element of
the <picture> element (in addition to src, or instead of it? I am not
sure).

Then you could do stuff like this:
<picture>
<source media="(orientation:landscape)" srcset="long.jpg 1x, long2.jpg 2x">
<source media="(orientation:portrait)" srcset="tall.jpg 1x, tall2.jpg 2x">
<img src="fallback.jpg" />
</picture>

>>>

I’m really digging this solution Florian. It seems like the best of both worlds. I’m still not 100% sure about the impact on the pre-processor but I think it's an interesting avenue to examine.

Cheers,

Aaron