[whatwg] Media queries, viewport dimensions, srcset and picture

Florian Rivoal florianr at opera.com
Thu May 24 00:43:21 PDT 2012


On Wed, 23 May 2012 21:48:39 +0200, Markus Ernst <derernst at gmx.ch> wrote:

> Am 23.05.2012 17:21 schrieb Florian Rivoal:
>> 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>
>
> Yesterday I made a similar proposal in an other thread:
> http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2012-May/036143.html

Yes, indeed, this seems to be exactly the same proposal. Sorry for
not noticing you had already made it.

> I'd like to suggest that @srcset in this form would also be suitable for  
> the <img> element, to address the optimization use case (without art  
> direction) without the verbosity of <picture>.

Sure, sorry for not being very clear about that. In my mind, @srcset
would apply to both <img> and <source>. If you need media queries (to
detecte portrait vs landscape, the viewport size, color depth...),
you go with:

  <picture>
   <source media="..." srcset="...">
   <source media="..." srcset="...">
   <source media="..." srcset="...">
   <img src="...">
  <picture>

But if you don't need media queries, and only want images that adapt to the
resolution and bandwidth, you do this one:
  <img src="..." srcset="...">

  - Florian


More information about the whatwg mailing list