Skip to content

Weppy: Javascript Shim for WebP on Chrome 6 and Firefox 4.0

WebP http://code.google.com/speed/webp/

Recently, Google announced a new lossy image compression codec, named WebP, intended to supersede JPEG. It is based on VP8′s intraframe compression algorithm. It’s not natively supported in any browsers yet. Weppy is a compatibility layer that changes WebP files into WebM files that can be loaded on several modern browsers.

How does it work?

WebP is actually a lightweight container for a single VP8 frame (whereas WebM is a container based off Matroska meant for video). WebM support exists already in Chrome, Firefox and Opera, so all that’s needed to render it is to do a little magic to convert the RIFF encoded WebP image into a EBML/Matroska encoded single frame WebM video, loading it in a , using drawImage() on a and replacing the .webp image with the data URL extracted from the using toDataURL().
Issues

  • Chrome (on linux anyway) tends to crash a lot.
  • Firefox throws a security exception when doing toDataURL() on a canvas after drawImage() of a video loaded from a data url. The hack being used it to replace the image node with the actual canvas instance.
  • Opera doesn’t work. I don’t really have the time to investigate.

What Browsers?

Chrome 7.0 and Firefox 4.0 were both tested. Opera doesn’t work for reasons that I’m not sure about. I would appreciate it if someone fixes it and submits a patch :)

Demo

http://antimatter15.github.com/weppy/demo.html

Posted in Weppy.

Tagged with , , , , .

6 comments

By admin – October 3, 2010

6 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. unxed says

    New WebPJS library brings WebP support to all major browsers, including IE6+
    http://webpjs.appspot.com/

    November 20, 2011, 2:36 am

Continuing the Discussion

  1. 404 Not Found linked to this post on May 5, 2011

    [...] Since WebM decoding is provided by the Gecko renderer and not by a plug-in, it can be leveraged by JavaScript. A small JavaScript script named Weppy is hosted at GitHub that can take a .webp img element and converts it into a single-frame WebM video element. So if you want to publish WebP content directly on the Web for enjoyment by Firefox users, you can do so by including weppy.js in your page — your visitors will never even know there difference. You can read more about Weppy’s functionality and see example code at the author’s blog. [...]

  2. Wykorzystanie formatu zdjęć Google WebP z otwartymi narzędziami na Linuksa | glom.pl linked to this post on May 26, 2011

    [...] Od kiedy dekodowanie WebM jest dostarczane przez renderer Gecko a nie przez plug-in może być wykorzystywane przez JavaScript. Mały skrypt JavaScript o nazwie Weppy jest hostowany na GitHub który może wziąć .webp elementu i skonwertować go pojedynczej ramki WebM elementu . Więc jeśli chcesz opublikować treści WebP bezpośrednio w sieci do wykorzystania przez użytkowników Firefox-a możesz to zrobić włączając wepby.js do swojej strony – twoi odwiedzający nie będą nawet widzieć różnicy. Możesz przeczytać więcej o funkcjonalności Weppy i zobaczyć przykładowy kod na blogu autora. [...]

  3. A Comprehensive Guide to WebP | Web Performance Monitoring and Optimization linked to this post on March 8, 2013

    [...] to this bug, so at this point the only thing Mozilla needs to do is hit accept. There is also a JavaScript shim that adds WebP support to all WebM compatible browsers (which includes Firefox), but this kind [...]

  4. WebP – 谷歌的图片压缩技术 – wiki.kukool.cn linked to this post on March 28, 2013

    [...] to this bug, so at this point the only thing Mozilla needs to do is hit accept. There is also a JavaScript shim that adds WebP support to all WebM compatible browsers (which includes Firefox), but this kind [...]

  5. WebP – 谷歌的图片压缩技术 – wiki.kukool.cn linked to this post on March 28, 2013

    [...] to this bug, so at this point the only thing Mozilla needs to do is hit accept. There is also a JavaScript shim that adds WebP support to all WebM compatible browsers (which includes Firefox), but this kind [...]



Some HTML is OK

or, reply to this post via trackback.

« »