[whatwg] Correcting some misconceptions about Responsive Images

[Odin Hørthe Omdal]

Thank you for the well written email.

On Wed, 16 May 2012 09:13:01 +0200, Tab Atkins Jr. <jackalmage at gmail.com>  
wrote:
> 3. "@srcset doesn't have good fallback behavior". Yup, it does. The
> simplest way is to just do the simplest thing: provide both a @src and
> a @srcset, and that's it.  This has good behavior in legacy UAs, and
> in new ones.  The only downside of this is that if you're polyfilling
> the feature in legacy UAs, you get two requests (first the @src, then
> whatever the JS changes it to).
>
> If this is problematic, there's a more verbose but still simple way to
> handle this (afaik, first suggested by Odin):
>
> <img src=data: srcset="foo.jpg 1x, foo2.jpg 2x"
> style="display:none;"><noscript><img src="foo.jpg"></noscript>

It was not first suggested by me, I shopped around in the RespImg CG and
on different blogs and comments and articles and picked that up
somewhere along the path.

I think Scott Jehl's "Some early thoughts on img at srcset in the real
world" might be the first place I saw it:

    <https://gist.github.com/2701939>

Although he said something to the effect that "plausible, but may have
some issues."

Hence my proof of concept *demo* of a srcset polyfill that optimizes for
few requests:

   <http://odin.s0.no/web/srcset/polyfill.htm>

To show that it can work. The example I'm using is:

     <img srcset="small.png 500w, big.png 1000w" style="display:none">
     <noscript><img src="small.png" alt="Alt here"></noscript>

It'll work without javascript, only showing one alt text.

With javascript on, it'll copy the alt text to the real <img> and take
away the display:none (which is only there to hinder IE showing a broken
image icon when you have no Javascript).

> In modern UAs, JS just has to remove the @style.  In legacy UAs, JS
> removes the @style and sets the @src appropriately (the data: url
> ensures that there's not an extra request before JS activates).  If JS
> isn't turned on, the first image just never displays, but the second
> one does.  This is more complicated and a bit more fragile than the
> previous solution, but it only ever sends a single request.

Yes. I have a live test for something like that. It works in all devices
and browsers I've got access to. Which is not really very much, but
should cater for quite a large part of the internet. (:P)

It's at the same page ( http://odin.s0.no/web/srcset/polyfill.htm ).

-- 
Odin Hørthe Omdal (Velmont/odinho) · Core, Opera Software, http://opera.com