webp格式的图片如何在html中应用

webp格式的图片既然有那么多的好处，那么如何使用这种格式的图片？首先要考虑到兼容性，对于不支持webp格式的图片依然使用原来的方式， 对于支持webp格式的图片则使用新的格式。例如静态资源中包含了webp和img两个文件夹，分别是webp资源和png资源。对于同一个使用背景图的元素， 我们原先是这样设置的

        .elem {
            background-image: url(../img/bg1.png);
            ......
        }

但是我们想在要支持webp格式的，则现在有这样一种方法。先看一下结果:

        [data-webp="0"] .elem {
            background-image: url(../img/bg1.png);
            ......
        }

        [data-webp="1"] .elem {
            background-image: url(../webp/bg1.webp);
            ......
        }

这种通过data-webp属性选择器来判断使用哪种的方式来设置图片，首先判断当前环境是否支持webp方式， 然后将是否支持(1/0)给一个根元素(html)设置为data-webp的属性值，那么怎么判断浏览器环境是否支持webp哪？
代码是：

        function isSupportWebp () {
            // save the results supported by the browser
            var flag = '0'
            // get canvas element
            var canvasEL = document.createElement('canvas')
            // get html element
            var docEl = document.documentElement || document.getElementsByTagName('html')[0]
            // determine whether the browser supports canvas elements
            if (canvasEL.getContext && canvasEL.getContext('2d')) {
                flag = canvasEL.toDataURL('image/webp').indexOf('image/webp') > -1 ? '1' : '0'
            }
            // set data-webp attribute for html
            docEl.setAttribute('data-webp', flag)
            // return supported result
            return flag
        }

        isSupportWebp()

参考文献