(轉)讓瀏覽器支持Webp

轉載：https://segmentfault.com/a/1190000005898538?utm_source=tuicool&utm_medium=referral

Webp介紹

webp是一種同時提供了有損壓縮與無損壓縮的圖片檔案格式 ，衍生自影像編碼格式VP8，是由Google在購買On2 Technologies後發展出來，以BSD受權條款釋出。根據 Google 的測試，無損壓縮後的 WebP 比 PNG 文件少了 45％ 的文件大小，即便這些 PNG 文件通過其餘壓縮工具壓縮以後，WebP 仍是能夠減小 28％ 的文件大小。WebP最初在2010年釋出，目標是減小檔案大小，但達到和JPEG格式相同的圖片品質，但願可以減小圖片檔在網路上的傳送時間。

技術

WebP使用VP8做爲壓縮演算法

支持

如下爲CAN I USE 的數據，綠色爲支持的瀏覽器

轉換工具

智圖
isparta

webp的優點

同質量的前提下，WebP體積大約只有JPEG的1/3，對於採用大量圖片的網頁，WebP格式能夠節省大量帶寬，大幅提高網頁加載速度。例如，YouTube的視頻略縮圖採用WebP格式後，網頁加載速度提高了10%；谷歌的Chrome 網上應用商店採用WebP格式圖片後，天天能夠節省幾TB的帶寬，頁面平均加載時間大約減小1/3；Google+移動應用採用WebP圖片格式後，天天節省了50TB數據存儲空間。

使用場景

對於圖片佔主要流量的網站，使用webp格式圖片能很大程度減少圖片體積，在我以前的一個項目裏，首頁是四張大圖的輪播，圖片優化很成問題，在使用webp格式圖片後，圖片體積減少了70%以上，目測圖片質量沒有影響

判斷瀏覽器支持webp的方法

方法一：

function checkWebp() { try{ return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0); }catch(err) { return false; } } console.log(checkWebp()); // true or false 

方法是在其餘地方上看到的，我用trycatch改寫了一下

原理：

The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.

If the height or width of the canvas is 0, the string "data:," is returned. If the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported. Chrome also supports the image/webp type. 

方法二：

var d = document; var check = function() { var supportWebp; try { var ele = d.createElement('object'); ele.type = 'image/webp'; ele.innerHTML = '!'; d.body.appendChild(ele); //奇妙所在,若是瀏覽器支持webp,那麼這個object是不可見的(offsetWidth爲0), //不然就會顯示出來,有可視寬度. supportWebp = !ele.offsetWidth; d.body.removeChild(ele); }catch (err) { supportWebp = false; } return supportWebp; } 

此方法是在看某個項目的源碼時看到的

讓瀏覽器支持webp

1.若使用場景是瀏覽器，能夠：
JavaScript 能力檢測，對支持 WebP 的用戶輸出 WebP 圖片
使用 WebP 支持插件：WebPJS

2.若使用場景是 App，能夠：
Android 4.0 如下 WebP 解析庫（連接）
iOS WebP 解析庫（連接）

參考資料

WebP 探尋之路
MDN上對HTMLCanvasElement.toDataURL()方法的解釋