WebPJS - Google's new image format WebP for not supported browsers (with alpha-channel)

11/06/2013 11/14/2013 Update! Add h.264 results. Lossy compressed image study november 2013 [Link]
01/24/2013 Preview: Libwebp JavaScript v0.2.0 with alpha and lossless support [Link]
01/01/2013 Happy New Year! More new WebPJS and WebP in PHP news soon!
10/28/2012 Source code of "VP8 - WebM JavaScript Decoder for every browser" on github.com, now! Goto GitHub.com
05/04/2012 Ogg Vorbis JavaScript Decoder for every browser Try it out!
02/07/2012 New link: VP8 - WebM JavaScript Decoder for every modern browser Try it out!
01/06/2012 Snapshot: 01/13/2012: Experimental: WebP lossless decoder in javascript Link
12/12/2011 Update: WebPJS 0.0.2 is release
09/30/2011 first release click here for without WebPJS-Version - News: 12/2011 WebPJS developer has written some interest things about WebPJS
Follow code can you add in the header or anywhere on your website:
<script type="text/javascript" src="js/webpjs-0.0.2.min.js"></script>
or this code. This code only load the js file when webp not supported by browser & is PageSpeed optimized:
<script>(function(){var WebP=new Image();WebP.onload=WebP.onerror=function(){
if(WebP.height!=2){var sc=document.createElement('script');sc.type='text/javascript';sc.async=true;
var s=document.getElementsByTagName('script')[0];sc.src='js/webpjs-0.0.2.min.js';s.parentNode.insertBefore(sc,s);}};
WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';})();</script>
Download: This two files must in the same directory. right-click -> save as
deprecated
webpjs-0.0.1.min.js
webpjs-0.0.1.swf - swf for ie browser support

WebPJS Browser support Google Chrome Mozilla Firefox 3.5 and above Safari (3) 4, 5 Opera Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 New: Android 2.2 and above iPhone iOS 5 (since v0.0.2) 4, too iPad

Background-Image from Stylesheet: .webp-bg { background-image:url("images/fruit.webp"); }
Background-Image from style attribute in tag: <div style="background-image:url('images/2.sm.webp'); width:500px; height:214px;"></div>

Image from img-tag: <img src="images/3.sm.webp" width="300" alt="Frame 10 of the \"Parkrun\" sequence 3">
Frame 10 of the 'parkrun' sequence 3

<img src="images/fruit.webp" width="200" height="400" alt="This was my first image in/for alpha channel">
This was my first image in/for alpha channel

<img src="images/5.sm.webp" alt="Fire breathing \"Jaipur Maharaja Brass Band\" Chassepierre Belgium 5">
Nærøyfjorden, Norway - from Breiskrednosi. UNESCO World Heritage

Extern Image-URL: <img src="http://www.hohenlimburg.org/webpjs/1.sm.webp" alt="Nærøyfjorden, Norway - from Breiskrednosi. UNESCO World Heritage 1">
Fire breathing 'jaipur maharaja brass band' chassepierre belgium 5

WebPJS is an idea by Dominik Homberger (Dominikhlbg Website)