webp实践

现在网站消耗流量最大的也就是图片了,而解决图片的体积过大的终极解决方案就是Webp图片了,虽然目前浏览器中只有chrome内核支持webp,但是考虑到chrome的用户量,我们也值得单独为chrome提供webp图片。

由于我们使用的是又拍云存储图片,所以最简单的办法就是使用又拍云提供的图片处理功能,直接在链接后加上 !/format/webp,又拍云就会提供转换后的图片。还有一个支持让浏览器支持webp的插件webpjs,但是这个插件性能很差,所以并不推荐使用。

所以我写了一个简单的指令替换图片的src属性

app.directive('imgWebp', function () {
    return {
        restrict: 'AE',
        link: function ($scope, $element, $attrs) {
            $attrs.$observe('imgWebp', function (value) {
                if (supportWebP) {
                    $element[0].setAttribute('src', value + '!/format/webp');
                } else {
                    $element[0].setAttribute('src', value);
                }
            });
        }
    };
});

关键点在于如何检测浏览器对webp的支持,简单的方法可以直接根据浏览器的UV来判断,但是最稳妥的办法还是对浏览器做特征检测。

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

原理也很简单加载一个1×1的wenp图片,然后在加载完成时检测图盘的高度是否为1.