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' + 
'AgSSNtse/cXjxyCCmrYNWPwmHRH9jwMA';
     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.

About these ads

7 thoughts on “Detecting webP support

    1. jameswestgate Post author

      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.

      Reply
      1. chatterb0tX

        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. Ozmar Fraga

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

        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:

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