WebP 图片兼容性处理

Question

前段时间在做图片的 WebP 格式升级，WebP 格式的图片在网络传输时可以节省流量，但是浏览器的兼容性并不好，这里收集整理了一些 WebP 图片兼容性处理的方案。

1.通过 picture 标签进行选择判断

<picture>
    <source srcset="img/pic.webp" type="image/webp">
    <source srcset="img/pic.jpg" type="image/jpeg">
    <img src="img/pic.jpg">
</picture>

该种方法要求在每个要请求 webp 图片的标签下都要通过 picture 标签来进行兼容性处理，同时注意该标签在IE的兼容性并不是很好，不过已经比 webp 的兼容性好一些。

2.通过服务端判断请求头中的 Accept 的值判断是否支持 webp

通过 HTTP request header 中是否存在 Accept: image/webp 来判断，这种方法的缺点在于：很多时候我们的图片等静态资源都会放到 CDN 服务器上，在这个层面加上判断 webp 的逻辑会更麻烦一些

3.由浏览器端判断是否支持 WebP 格式

if(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0){
   //  该浏览器支持WebP格式的图片
 }

该种方法的原理为：HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。

1. 如果画布的高度或宽度是0，那么会返回字符串 data:,。
2. 如果传入的类型非 image/png，但是返回的值以 data:image/png 开头，那么该传入的类型是不支持的。
3. Chrome 支持 image/webp 类型。

stackoverflow 上还有一种浏览器端检测是否支持 webp 的方法，这里也贴上：

var hasWebP = (function() {
    var images = {
        basic: "data:image/webp;base64,UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==",
        lossless: "data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA="
    };
    
    return function(feature) {
        var deferred = $.Deferred();
        
        $("<img>").on("load", function() {
            if(this.width === 2 && this.height === 1) {
                deferred.resolve();
            } else {
                deferred.reject();
            }
        }).on("error", function() {
            deferred.reject();
        }).attr("src", images[feature || "basic"]);
        
        return deferred.promise();
    }
})();

var add = function(msg) {
    $("<p>").text(msg).appendTo("#x");
};

hasWebP().then(function() {
    add("Basic WebP available");
}, function() {
    add("Basic WebP *not* available");
});

hasWebP("lossless").then(function() {
    add("Lossless WebP available");
}, function() {
    add("Lossless WebP *not* available");
});