Re: Stretchy images shouldn't require media queries

"Doesn't validate"? An image can have no width and height attributes without any problems. The only advantage of having them is the browser can allocate a space that big when doing initial layout and waiting for the image to download. Its actually a disadvantage on any fluid layout, where they *shouldnt* have a size set. I've never used width and height attributes because they cause problems and have no benefits in modern designs.

What doctype are you validating against?

On 4 Nov 2012, at 23:57, Chris McAndrew <chris@csmcreative.com> wrote:

> Hi Matt,
> I have a question / comment. I had used your solution for a while because it was the only thing that came close to what I wanted to do. It is a very clever solution and well done.
> 
> The reason I stopped using Adaptive Images is because it doesn't validate without width and height attributes. I thought all of the work being done with <picture> was to also try and address some of this. For me, anything I work on has to validate so I was curious what your thoughts are regarding this.
> 
> I hope all is well. 
> Chris
> 
> 
> On Sun, Nov 4, 2012 at 5:02 PM, Matthew Wilcox <elvendil@gmail.com> wrote:
>> 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
>