Re: Stretchy images shouldn't require media queries

Incidentally, <picture> chooses another compromise that has its own flaws. With <picture> you use the viewport to dictate which asset to download, but you're tying that to the current design.

If the current design's main column at a 1024 viewport is 800px wide then the asset provided will very likely be 800px wide because that's the perfect size. Perfect for now. Change the design and the main column might be 1000 px in the new one - and yet <picture> will still pull the 800px asset, because it's hard-coded into the HTML.

It's exactly this reason why I am unlikely to use <picture> in its current form. It's not future proof and it pollutes mark-up with design data.

-Matt

On 2 Nov 2012, at 17:10, Eric Portis <lists@ericportis.com> wrote:

> Hello all,
> 
> I just sent a big email to the WHATWG list, using a srcset example to illustrate the pitfalls of tying a responsive-images markup solution to viewport-size queries. Requiring authors to bake information about their layouts into their markup results in markup that is potentially complex and certianly fragile.
> 
> http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-November/037772.html
> 
> All of my concerns also apply to <picture>. Replace my "this is complex and fragile" srcset example with this:
> 
> <picture>
> 
> 	<source media="(min-width: 56em)" srcset="400.jpg 1x, 800.jpg 2x">
> 	<source media="(min width: 32em)" srcset="200.jpg 1x, 400.jpg 2x">
> 	<source media="(min-width: 28em)" src="800.jpg">
> 	<source srcset="400.jpg 1x, 800.jpg 2x">
> 	
> 	<img src="200.jpg">
> 
> </picture>
> 
> 
> ...and the "just let authors describe the resources" example with this:
> 
> 
> <picture>
> 
> 	<source src="800.jpg" width="800" height="533">
> 	<source src="400.jpg" width="400" height="266">
> 	<source src="200.jpg" width="200" height="133">
> 
> 	<img src="200.jpg">
> 
> </picture>
> 
> 
> ...and it's an email about the <picture> spec. Thoughts?
> 
> —eric
>