Javascript检测浏览器对WebP的支持

[lijin]

WebP格式的图片在图片大小方面有着很大的优势，所以从性能优化的角度我们需要考虑在一些情况下使用WebP图片。

目前在Chrome和Opera已经开始支持WebP格式（详细请点击http://caniuse.com/#feat=webp），未来我相信会有更多的浏览器加入。所以我们在检测WebP的浏览器兼容性时，应该采取特征检测方法。

借鉴WebPJS的思路，我们将生成一个1*1像素的WebP图片（采用data URI方式是因为可以减少图片请求，更快达到检测的效果），示例代码如下：

var WebP = new Image();
WebP.onload = WebP.onerror = function(){
    window.supportWebP = WebP.height == 1;
};
WebP.src = "data:image/webp;base64,UklGRiYAAABXRUJQVlA4IBoAAAAwAQCdASoBAAEAAAAMJaQAA3AA/v89WAAAAA==";

在接下来的代码中，我们就可以通过supportWebP变量来获知浏览器对WebP格式的支持与否。