On Wed, 23 May 2012 20:56:29 +0200, Matthew Wilcox
<m...@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
