How to detect browsers supporting WebP and how to serve them WebP pictures?

Question

Seen the amazing size reduction of WebP pictures (about 28% smaller than "pngcrushed" PNG for lossless + alpha pictures), we'd like to serve WebP pictures to browsers supporting WebP.

How can I detect from a Java webapp server if the client's browser is supporting WebP?

There's been a question here about how to do it from JavaScript:

Detecting WebP support

But I'd like to know how to do it from Java. If doing from Java means calling JavaScript on the client side then I'd like to know how to to that.

Answer 1

There is a simple way of detecting webP support on the client. You could then set a cookie on the client and read the value on the server.

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."); 
});

More information here.