- From: Aaron Gustafson <aaron@easy-designs.net>
- Date: Wed, 23 May 2012 20:41:31 -0600
- To: whatwg@lists.whatwg.org
<<< 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
Received on Thursday, 24 May 2012 02:42:09 UTC