Check if Browser supports WebP

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

     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!

Anubhav Ranjan

Software Engineer II at Microsoft

Anubhav is a Program Freak who loves coding and is currently working as a Software Engineer II in Xamarin Team at Microsoft. He is very passionate about Coding and loves developing Mobile Apps. At present, he helps C# Developers in taking their code across platforms. Also, pretty much interested in the latest ongoing trend which is Bots and AI. Currently working on Microsoft Bot Framework as well.
He is an active member of the BDotnet(Bangalore .NET) User Group and Speaker/Member of XHackers - A Community for Cross-Platform App Development.

Leave a Reply