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

[Florian Rivoal]

On Wed, 23 May 2012 20:56:29 +0200, Matthew Wilcox  
<mail at matthewwilcox.com> wrote:

> I think this is a good step forward, however nless I am
> mis-understanding something (entirely possible given how much has been
> going on over this recently) there are problems still...
>
> Resolution of an image and a device is not a guarantee of suitability
> of an image at a given physical size. This solution seems to take the
> art-directed aspect out of the equation. Just because there's enough
> resolution on the device does not mean that the image itself is
> suitable at the size the device is outputting the image. Without some
> form of other qualifier you end up in a situation where an iPhone 4
> with it's retina display will load an image intended for a device
> twice as big. Now, unless you've got perfect eyesight that image will
> be displayed at the correct resolution, but *half the size* on an
> iPhone 4. That's going to be a problem for some users, especially
> older users.
>
> There needs to maintain an art-directed aspect, and it doesn't seem
> possible for a device to have the required intelligence to know which
> image is appropriate based solely on the device's pixel density and a
> collection of images at given dimensions.

Maybe I am misunderstanding you, but if I am not, my proposal addresses
this need. You'd write it something like this:

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

You would use the media attribute of the source element to create
arbitrarily complex media queries for your art-directed decisions,
and use the srcset on the same element to provide various
resolutions.

  - Florian