[whatwg] Features for responsive Web design

[Markus Ernst]

Am 07.08.2012 21:09 schrieb Ian Hickson:
>
> On Tue, 22 May 2012, Markus Ernst wrote:
>> Am 18.05.2012 23:19 schrieb Kornel Lesiński:
>>> If you'd like to see <picture> proposal succeed, then please help
>>> fixing its drawbacks. Make selection and embedding of 2x images
>>> easier. Give UA freedom to use cached higher-quality images when it
>>> can. Give UA freedom to choose images to minimize bandwidth or
>>> maximize quality. Reduce verbosity of most common cases.
>>
>> Maybe the use cases should be solved independent from each other:
>> - Use <picture> for the art direction use case.
>> - Remove the MQ except the pixel density from @srcset, and make @srcset
>> available in both <img> and <source>:
>>
>> <img src="normal.jpg" alt="" srcset="high.jpg 2x, normal.jpg 1x">
>>
>> <picture alt="">
>>    <source src="mobile.jpg"
>>      srcset="low.jpg 0.5x, mobile.jpg 1x, mobile-hd.jpg 2x">
>>    <source src="large.jpg" media="min-width: 600px"
>>      srcset="large.jpg 1x, large-high.jpg 2x">
>>    <img src="mobile.jpg">
>> </picture>
>
> I don't understand why this is better than:
>
>     <img src="large.jpg" alt=""
>          srcset="low.jpg 600w 0.5x, mobile.jpg 600w 1x, mobile-hd.jpg 600w 2x,
>                  large-high.jpg 2x">
>
> It seems to me that srcset as specified does exactly the same thing, but
> more succintly.

[...]

> On Thu, 24 May 2012, Florian Rivoal wrote:
>>
>> <picture>
>>   <source srcset="normal.jpg 1x, highres.jpg 2x">
>>   <source media="(max-width:768px)" srcset="ipad.jpg 1x, ipad3.jpg 2x">
>>   <source media="(max-width:320px)" srcset="iphone.jpg 1x, iphone4.jpg 2x">
>>   <img src="normal.jpg">
>> </picture>
>
> I don't understand why this is better than:
>
>     <img src="normal.jpg" srcset="highres.jpg 2x,
>                                   ipad.jpg 768w 1x, ipad3.jpg 768w 2x,
>                                   iphone.jpg 320w 1x, iphone4.jpg 320w 2x"
>          alt="...">
>
> ...which as far as I can tell does exactly the same thing.

It is better because art direction and bandwidth use cases can be solved 
differently in an appropriate manner:
- For the bandwidth use case, no MQ is needed, but only some information 
on the sources available to let the UA decide which source to load.
- For the art direction use case OTOH, the <picture> element is more 
intuitive to handle and also easier to script, as sources can be added 
or removed via DOM.

Anyway, with your proposal, would this be valid, to address the 
bandwidth-only use case?:

<img src="normal.jpg" alt="" srcset="high.jpg 2x, normal.jpg 1x">