Cross-browser Webp with jpeg fallback

[superdav]

I've been looking around but haven't seen any examples on how to
display webp images to browser that support them and jpegs to browsers
that don't. It seems difficult to even detect native support for it
using javascript. Ideally one could supply multiple src to a img tag
similar to how the html5 video tag works. Has anyone seen a cross
browser webp example with fallbacks to jpeg?

[Rich Bradshaw]

This isn't my code, but have a look at http://jsfiddle.net/Pointy/JMzj2/2/

It requires jQuery 1.5+ as it makes use of promises, but might be a
good start. Essentially it loads a known webp image, then checks
whether it loads or errors.

[Mikołaj Zalewski]

The image can be also inlined in the JavaScript file using a 'data:'
URI (what should be better for latency) - there is an example in code
linked from http://code.google.com/p/webp/issues/detail?id=67 .

Mikołaj

[David Stone]

I actually been working on this and used the Weppy library is a start to
create a complete solution that serves WebP images to browsers that
support them and Jpeg to browsers that don't. To see it in action and a
complete explanation check out my blog:
http://nnucomputerwhiz.com/use-webp-images-with-jpeg-fallback.html

It uses browse capabilities tests and does not rely on User-Agent
sniffing. This should allow people to start using WebP now without
changing the user experience for browsers that don't support it.

Please try it and let me know if it works for you.

-Dave

[vor...@gmail.com]

Hey, i'm using this script on my portfolio.

It's easy to set up and there's not much code but i don't know if it's the best way.

Basically i just all image extensions (in this case .jpg) to .webp if the browser supports it.

Check it out and see if you can improve it because that would be great!