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

[Kornel Lesiński]

On Sun, 13 May 2012 21:23:58 +0100, Odin Hørthe Omdal <odinho at 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="dog at 2.jpg">
>
>   vs.
>
>   <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">

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="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
> than dog.jpg.

But still displayed at 960 CSS pixels or course? That'd be fine (and the  
UA could even download dog at 2x when user zooms in).

-- 
regards, Kornel Lesiński