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

逃离我推掉我的手 2022-03-17 12:52 763阅读 0赞

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()

[参考文献][Link 1]

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL