Re: Stretchy images shouldn't require media queries

This'd be lovely if it could work. The problem is it can't.

In order to pick a size to use the browser would have to know how big the space was the image is going to fit into. But the way websites work is the space is dictated by the content. It's a circular problem. So you can't just pick the right sized asset to load based on the "available space" because you don't know the available space.

If you go off the viewport instead of the div/section/whatever then you end up withthe exact same behaviour Adaptive Images does (http://adaptive-images.com) - it downloads an image the same size as the screen. While that's fine for devices like mobiles where it's likely the majority of content images would naturally be almost as wide as the viewport anyway, it becomes less and less acceptable as a compromise as viewport sizes (and therefore asset sizes) go up.

AI gets around this by having the author invoke a maximum size in the PHP.

-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
>