W3C home > Mailing lists > Public > whatwg@whatwg.org > May 2012

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

From: Florian Rivoal <florianr@opera.com>
Date: Thu, 24 May 2012 09:55:32 +0200
To: whatwg@lists.whatwg.org
Message-ID: <op.wesyyua94p7avi@localhost.localdomain>
On Wed, 23 May 2012 20:56:29 +0200, Matthew Wilcox  
<mail@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
Received on Thursday, 24 May 2012 07:56:07 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Wednesday, 30 January 2013 18:48:08 GMT