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

Re: [whatwg] Implementation complexity with elements vs an attribute (responsive images)

From: Odin Hørthe Omdal <odinho@opera.com>
Date: Sun, 13 May 2012 20:23:58 +0000
To: Kornel Lesiński <kornel@geekhood.net>, whatwg@lists.whatwg.org
Message-ID: <9494e07e35c84a9cbdd2ea31c120bef3@opera.com>
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:
>
>  <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="dog@2.jpg">

  vs.

  <img src="dog.jpg" srcset="dog@2.jpg 2x">

is not really all that different, but the second should be more
flexible. Also downscaling:

  <img src="dog.jpg" srcset="dog@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@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.

-- 
Odin Hørthe Omdal, Core, Opera Software
Received on Sunday, 13 May 2012 20:24:38 GMT

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