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

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

WebPJS Browser support New:

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">

<img src="images/fruit.webp" width="200" height="400" alt="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">

Extern Image-URL: <img src="http://www.hohenlimburg.org/webpjs/1.sm.webp" alt="Nærøyfjorden, Norway - from Breiskrednosi. UNESCO World Heritage 1">