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