WebP is a new image format that provides lossless and lossy compression for images on the web. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.

Since, WebP reduces the size of the image to almost 25%-30% which is a big deal when it comes to websites employing large images. The current trend is that almost every site is either based on responsive design or is trying to employ a similar mechanism so that it can be opened in the Mobile Browsers. If you look at the Smart Phones nowadays, they have a huge processing power, however, the internet speed is still behind and thus creates an issue when it comes to the loading of numerous images. Because of this we try things like gzip or caching or something else.

Anyways, moving on, I know you might say that still WebP is not supported. No issues, what you can do is keep copies of images in various formats like WebP as well as Jpg. This way, if the browser doesn’t support WebP you can always make use of JPG.

Here is a small script that I have got and use in my sites:

function testWebP(callback) {
    var webP = new Image();
     webP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw' + 
'AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA';

     webP.onload = webP.onerror = function () {
          callback(webP.height === 2);
     };
};

testWebP(function(supported) {
     // Probably add css class like 'webp' or 'no-webp'
     console.log((supported) ? "webP 0.2.0 supported!" : "webP not supported.");
});

Now all you have to do is use this script in your site and update the image sources accordingly for some of the bigger images.

Happy Coding!