

Want WebP today? Implement it in JavaScript - devongovett
http://badassjs.com/post/1313384987/weppy

======
user24
damn, I was going to do this! Hah, it's a good idea.

Actually I was going to have something like this: <img src="foo.webp"
onerror="makecompat();"> where makecompat gets the webp data and implements
the webp algorithm to draw the image onto a canvas which replaces the image
element. That way any browser that supports canvas would be able to support
webp, and it would 'fail forward'.

But still, this is a cool script, and I'll certainly use it if I want webp
images.

~~~
seanalltogether
Your idea would be far more valuable then the one presented here. This script
only adds support for WebP images within browsers that already support WebM,
which seems like a trivial task for those specific browser vendors to support
anyway.

~~~
antimatter15
I tried porting VP8, but the spec is huge (the allegedly incomplete bitstream
specification is 104 pages), and performance-wise, it couldn't compare to a
native webm/vp8 implementation. I guess i'll give it another shot.

I'm not exactly sure how much of vp8 is part of the interframe prediction,
because WebP only contains a single intraframe, it might be practical to
implement a small subset.

~~~
user24
how about a serverside implementation? Try loading native webp, if that fails,
send the webp data to a webp-to-png service and render in png on the client.
Performance would probably be fine, and imagemagick or something similar will
probably support webp soon so the server won't require us to write a whole
webp implementation.

~~~
antimatter15
That negates the purpose of a bandwidth-efficient lossy image format.

~~~
user24
even my original idea would require a double-hit to the server, because I
don't think you can extract data loaded into an image element through JS, so
you'd have to read the src attribute and re-request it via XHR as raw data,
and then parse that into a replacement canvas element.

The main benefit is being able to default to webp, and save all your resources
in that format alone, and provide a fallback for browsers which don't support
it, instead of having to provide 2 sets of images and serve different ones
depending on the browser.

