[whatwg] Implementation complexity with elements vs an attribute (responsive images)
Odin Hørthe Omdal
odinho at opera.com
Sun May 13 13:23:58 PDT 2012
Kornel Lesiński wrote:
> Selection of 1x/2x images is relevant only as long as we have 100dpi
> screens and slow connections, and both will disappear over time.
Well, the web is a huge place. I'm quite sure that'll take ages and
ages if it ever happens at all (I don't think it'll ever disappear).
Might get irrelevant for some small and specific markets/segments though.
> How about that:
> <source src="narrow_low-quality" srcset="narrow_hi-quality 2x"
> <source src="wide_low-quality" srcset="wide_hi-quality 2x">
> <img src="fallback" alt="alt">
> 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
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="dog at 2.jpg">
<img src="dog.jpg" srcset="dog at 2.jpg 2x">
is not really all that different, but the second should be more
flexible. Also downscaling:
<img src="dog.jpg" srcset="dog at 2.jpg 2x, dog-lo.jpg 0.5x">
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="dog at 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
Odin Hørthe Omdal, Core, Opera Software
More information about the whatwg