Thank you for the well written email.
On Wed, 16 May 2012 09:13:01 +0200, Tab Atkins Jr. <[email protected]>
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@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
