使用js判断是否使用WebP图片显示

很多CDN服务商会有一个创建图片缩略图的规则。可以通过CDN设置并自动使用WebP图片。无奈我的目前没有，想要使用只好自己来配置。

WebP图片

如果你还不知道什么是WebP图片。可以查看一下下面的示例。

WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器宽带资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
WebP既支持有损压缩也支持无损压缩。相较编码JPEG文件，编码同样质量的WebP文件需要占用更多的计算资源。

缺点

目前支持的游览器：Chrome、Edge；
Mozilla的Firefox和苹果的Safar目前仍不支持WebP。
所以就有了下面这个js来判断是否需要使用WebP。

js代码

• 公共方法：用于所有img标签显示原图还是webp图片。

var checkPic = function(isWebP){
    $("img").each(function(i,v){
        var src = isWebP?$(v).attr('webppic-src'):$(v).attr('pic-src');
        $(v).attr('src',src);
    })
}

• html代码需要准备两个属性加载图片。

<img src="" pic-src="./test.jpg" webppic-src="./test.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 = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';

• 第二种：通过查看响应头和请求头相关字段，判断其Accept里是否含有 image/webp 字段，如果包含则说明支持WebP，反之则不支持。

var checkWebp = function(){
    try{
        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
    }catch(err) {
        return  false;
    }
}
checkPic(checkWebp());