js判断浏览器是否支持webp

2017-10-18 00:57:39Tags: javascript

webp是google开发的一款图片格式,在同jpg相比较下,其在保证质量一致的情况下,所占体积会比jpg少近40%,但是webp只支持google系的软件,如google blink内核系的浏览器,国内许多cdn服务商已经提供了webp的解决方案,对于大型网站来说,这能节约相当的流量,节约很多成本,而用户端也能更快加载图片,提升用户体验,实用场景会有很多,例如懒加载,需要前端判断是否支持,然后设置相应的cdn链接。

window.isSupportWebp = false;//是否支持
(function() {
    var img = new Image(); 
    function getResult(event) {
        //如果进入加载且图片宽度为1(通过图片宽度值判断图片是否可以显示)
        window.isSupportWebp = event && event.type === 'load' ? img.width == 1 : false;
    }
    img.onerror = getResult;
    img.onload = getResult;
    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='; //一像素图片
})();

这里推荐一款线上webp转换工具,来自腾讯ISUX团队,其也提供了客户端版本