Webp-test is a javascript tool to check whether the browser support webp.

Why Webp-test?

WebP is an image format that employs both lossy and lossless compression. The degree of compression is adjustable so a user can choose the trade-off between file size and image quality. WebP typically achieves an average of 39% more compression than JPEG and JPEG 2000, without loss of image quality.
But a few browsers support WebP right now (as of April 2010, Google Chrome 9+ and Opera 11.10 beta), how to use it?
Now you can use webptest to test browser whether it supports.

Usage


XWebp.test( function(){
console.info('your browser support webp');
} , function(){
console.info('your browser do not support webp');
});


It checks asynchronously when you first call the function. The callbacks will be fired immediately when having the result.

Example

I have two images ,one is mcdonald.jpg (379k) and the other one is mcdonald.webp (52k), the program will choose to show which one basing your browser.


<script>
(function(){
var container = document.getElementById('webp-test-image');
XWebp.test( function(){
container.innerHTML = '<b>Your browser support webp</b><br><img src="//chillrain.com/image/mcdonald.webp">';
},
function(){
container.innerHTML = '<b>Your browser do not support webp use jpg instead.</b><br><img src="//chillrain.com/image/mcdonald.jpg">';
});
})();
</script>

https://jsfiddle.net/mca07ty5/