WebPJS – easy solution to WebP-enable your site

After looking around for a easy solution to WebP-enable my site I found WebPJS a great javascript/flashscript solution by Dominik Homberger. The only thing you have to do is put the two files webpjs-0.0.2.min.js and webpjs-0.0.2.swf somewhere on  your site and add a bit of javascript

<script type=”text/javascript” src=”js/webpjs-0.0.2.min.js”></script>

to the header or the fotter of your site. Of course you have to adopt the paths (the example uses a folder called js).

If you prefer only using this script in case the brwoser of your visitor does not have native support for WebP you can use this script

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

which tests if the browser understands WebP and only loads the WebPJS script if the browser does not.

This solution works for nearly all browsers and supports WebP images used as a source of img-tags. By the way the flashscript is only used with IE…what else…

WebPJS does not work for embed an opbject tags.

Maybe I should write a small wordpress plugin to integrate this one ….


6 thoughts on “WebPJS – easy solution to WebP-enable your site

  1. This is not worked, have you checked this with image URI like “data:image/webp;base64……” . I think the firefox works only in image file “abc.webp”, not in like “data:image/webp;base64…..” . If I am wrong please let me know about this.

    Thank you.

  2. hello.
    thanks for this post. I’ve been trying to find a tutorial for webpjs and found yours atlast.
    I’m trying to implement webpjs in firefox. I’ve downloaded the minified version of webpjs and used the script. I’ve even used the online script, by linking my html directly to the website http://webpjs.appspot.com/js/webpjs-0.0.2.min.js. but firefox doesn’t display the images.
    my images are displayed in chrome. so my tag in the html code is correct.
    my version of firefox is 26.0.
    what could possible be wrong?

    PS: I converted my images from jpeg to webp using an online coverter. could this be an issue?

    • Hey Rao,
      mayb you can describe your problem a bit mor in detail. Which versions do you use? Can you describe your setup?

  3. Pingback: Update: wp-webp v0.3 #wpplugins « tuxlogger – WordPress and more…

Leave a comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s