On Sun, 13 May 2012 21:23:58 +0100, Odin Hørthe Omdal <odi...@opera.com>
wrote:
<picture>
<source src="narrow_low-quality" srcset="narrow_hi-quality 2x"
media="max-width:4in">
<source src="wide_low-quality" srcset="wide_hi-quality 2x">
<img src="fallback" alt="alt">
</picture>
Instead of srcset it could be src2x or another attribute that specifies
image for higher screen density and/or bandwidth. The point is that
media="" would allow author to choose image version adapted to page
layout, and another mechanism connected to <source> would allow UA to
choose image resolution.
Seeing it here in code it's actually not such a monster that I'd said
it'd be. So I like it even more, and it's the obvious way for these to
interact.
I think it'd be a mistake to call it src2x though, -- it feels very
specific. You can scale up to double then, but you can't necessarily go
beyond that: going down for e.g. mobile.
OTOH, 2x will be the most common usage at least as far as I can tell.
<img src="dog.jpg" src2x="d...@2.jpg">
vs.
<img src="dog.jpg" srcset="d...@2.jpg 2x">
is not really all that different, but the second should be more
flexible. Also downscaling:
<img src="dog.jpg" srcset="d...@2.jpg 2x, dog-lo.jpg 0.5x">
Yes, good point.
Actually, for this to work, the user agent needs to know the size of the
standard image. So:
<img src="dog.jpg" width="960"
srcset="d...@2.jpg 2x, dog-lo.jpg 500w">
So if you've got the smartphone held in portrait, it's 250 css pixels
wide, and so 500 real pixels, it could opt to show dog-lo.jpg rather
than dog.jpg.
But still displayed at 960 CSS pixels or course? That'd be fine (and the
UA could even download dog@2x when user zooms in).
--
regards, Kornel Lesiński
