讓瀏覽器支持Webp

本文最先發佈於csdnjavascript

Webp介紹

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

技術

WebP使用VP8做爲壓縮演算法java

支持

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

1.png-86.7kB

轉換工具

智圖
ispartagit

webp的優點

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

使用場景

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

判斷瀏覽器支持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改寫了一下canvas

原理:瀏覽器

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()方法的解釋

相關文章
相關標籤/搜索