判断浏览器是否支持WebP图片

上篇文章“什么是WebP图片？”对WebP图片进行了详细的介绍，并介绍其相对于其他图片格式的优势以及它的兼容性问题，那么，本文为大家讲述下如何考虑兼容性的情况下使用WebP图片。

解决原理

我们需要使用WebP格式的图准备两种格式的图片，一种是原图原格式，另一种是WebP图片。然后我们通过判断浏览器是否支持WebP，如果支持就显示WebP图，如果不支持就显示原图。这样我们就可以很妥善地解决WebP图的兼容性问题，最大限度地做到图片最优化。一来，不会因为我只放WebP图，从而影响不支持WebP的浏览器用户，这样比图片加载慢更可怕；二来，也不会WebP的兼容性问题而放弃使用WebP，这样也就体验不到WebP给我们带来的好处。总之，要恰到好处地使用WebP。

代码实现

1.宽高判断法

先加载一个WebP图片，如果能获取到图片的宽度和高度，就说明是支持WebP的，反之则不支持。

var isWebP = false;
var img = new Image();
img.onload = function(){
    isWebP = !!(img.height>0 && img.width>0);
    checkPic(isWebP);
};
img.onerror = function(){
    isWebP = false;
    checkPic(isWebP);
};
img.src = './c.webp';
var checkPic = function(isWebP){
    $("#pics img").each(function(i,v){
        var src = isWebP?$(v).attr('webppic-src'):$(v).attr('pic-src');
        $(v).attr('src',src);
    })
}

2.请求头相关字段

通过 Chrome 浏览器开发者工具抓包显示，可以通过查看响应头和请求头相关字段，判断其Accept里是否含有 image/webp 字段，如果包含则说明支持WebP，反之则不支持。

var checkWebp = function(){
    try{
        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    }catch(err) {
        return  false;
    }
}
isWebP = checkWebP() //isWebP为true则支持WebP，若为false则不支持WebP

总结：整体代码

代码里把两种方法都写进去了，实际使用的时候，选择其中一种使用就行了，把另外一个方法代码去掉，切勿同时使用，以免出错。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="pics">
	<img src="" pic-src="./c.jpg" webppic-src="./c.webp">
	<img src="" pic-src="./c.jpg" webppic-src="./c.webp">
	<img src="" pic-src="./c.jpg" webppic-src="./c.webp">
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
// 公共方法，操作放原图还是放WebP图
var checkPic = function(isWebP){
	$("#pics img").each(function(i,v){
		var src = isWebP?$(v).attr('webppic-src'):$(v).attr('pic-src');
		$(v).attr('src',src);
	})
}
// 第一种方法
var isWebP = false;
var img = new Image();
img.onload = function(){
	isWebP = !!(img.height>0 && img.width>0);
	checkPic(isWebP);
};
img.onerror = function(){
	isWebP = false;
	checkPic(isWebP);
};
img.src = './c.webp';
// 第二种方法
var checkWebp = function(){
    try{
        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    }catch(err) {
        return  false;
    }
}
checkPic(checkWebp());
</script>
</body>
</html>