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