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

Re: [whatwg] Correcting some misconceptions about Responsive Images

From: Odin Hørthe Omdal <odinho@opera.com>
Date: Wed, 16 May 2012 10:12:14 +0200
To: whatwg@lists.whatwg.org
Message-ID: <op.wed6eorl49xobu@odinho-fido.oslo.osa>
Thank you for the well written email.

On Wed, 16 May 2012 09:13:01 +0200, Tab Atkins Jr. <jackalmage@gmail.com>  
> 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@srcset in the real
world" might be the first place I saw it:


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:


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
Received on Wednesday, 16 May 2012 08:12:58 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:42 UTC