沐鳴總代平台_webp圖像格式

但是我們想在要支持webp格式的,則現在有這樣一種方法。先看一下結果:,webp格式的圖片既然有那麼多的好處,那麼如何使用這種格式的圖片?首先要考慮到兼容性,對於不支持webp格式的圖片依然使用原來的方式, 對於支持webp格式的圖片則使用新的格式。例如靜態資源中包含了webp和img兩個文件夾,分別是webp資源和png資源。對於同一個使用背景圖的元素, 我們原先是這樣設置的,WebP圖像格式,.elem { background-image: url(../img/bg1.png); …… },
,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(),[] .elem { background-image: url(../img/bg1.png); …… } [] .elem { background-image: url(../webp/bg1.webp); …… },這種通過>代碼是:,鏈接: http://www.fly63.com/article/detial/10143,