Detecting webP support

If you are loading images on the fly, it may be worthwhile detecting support for Google’s webP format. It offers size reduction of 30 – 40% over png and jpeg without loss in quality. You can use lossless or lossy compression too.

To feature detect, use this code:

function testWepP(callback) {
    var webP = new Image();     
     webP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4TCEAAAAvAUAAEB8wAiMw' + 
     webP.onload = webP.onerror = function () {
         callback(webP.height === 2);     

testWebP(function(supported) {
     console.log((supported) ? "webP 0.2.0 supported!" : "webP not supported."); 

No image required – it uses a data uri to determine support.

Detecting webP support

7 thoughts on “Detecting webP support

    1. jameswestgate says:

      webP is a new image format supported in Chrome and Opera – the key benefit is that images are about 30% smaller for the same quality – so if you have large images or if you have lots of images then it may be worth detecting webP support. The nice thing about this feature detect is that if in the future more browsers support webP they will automatically switch over. You have to remember to save your images as webP though and switch your img src to use .webp using script.

      1. hey thanks for your quick reply glad i checked back, this seems pretty interesting i will test this out on a site as i have lots of png images.

        i can see it definitely doing wanders for some sites.

      2. but what about other browsers? If I start using webp on my site and people using explorer or firefox come and visit it will they still be able to see them? I´m a photographer, you see, so I´m having trouble with having low size images with good resolution withouth having google webmaster tools telling me to optimize image size.

      3. jameswestgate says:

        Hi Ozmar – that is what the script is for – it feature detects for .webp and only uses that if the browser supports it. It does mean you have to create both .jpg and .webp versions of your images though ..

        See my previous posts on how to progressively enhance tags to load your preferred image on the fly

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s