webp介紹與使用

時間 2019-11-11

標籤 webp 介紹使用简体版

原文原文鏈接

webp是谷歌10年發佈的一種新的圖片格式，支持有損壓縮或無損壓縮。據官方稱無損壓縮的webp在體積上要比png小26%，而有損壓縮要比同質量jpg小25%~34%。經本人測試，由騰訊智圖處理的不一樣圖片轉換webp壓縮率不太同樣，在24%~83%之間都有。這樣大的壓縮率對於咱們Web前端開發工程師誘惑力實在太大了。由於互聯網很大一部分流量都來自圖片，圖片體積變小能夠幫助咱們讓網頁加載地更快，這對提高用戶體驗是有幫助的。

webp有損壓縮使用了一種高級預測編碼方法對圖片進行編碼，這種方法使用臨近像素塊中的值來預測當前塊中的圖像值，而後只須要對這種差別進行編碼。

webp無損壓縮使用已經可見的圖像碎片來精確地重建一個個新的像素。這種壓縮模式被稱爲「VP8L」，與LZ77壓縮算法有一些共同特徵。

那麼，如今是否有產品使用webp呢？答案是確定的，國外如Youtube、Gmail、Google Play、Chrome網上商店，國內如騰訊、淘寶、美團等都有webp的應用。科技博客 Gig‍‍‍aOM 曾報道：YouTube 的視頻略縮圖採用 WebP 格式後，網頁加載速度提高了 10%；谷歌的 Chrome 網上應用商店採用 WebP 格式圖片後，天天能夠節省幾 TB 的帶寬，頁面平均加載時間大約減小 1/3；Google+ 移動應用採用 WebP 圖片格式後，天天節省了 50TB 數據存儲空間。

那咱們開始使用webp吧！遺憾的是，除了chrome和opera，其餘瀏覽器都沒有對webp原生支持。因此就有了如下不一樣場景下的技術解決方案，在此共享給你們學習參考：

一、瀏覽器

方案一：

JavaScript能力檢測，僅對支持webp的狀況輸出webp

var testWebp = function(callback){
   var image = new Image();
   image.onerror = function(){
    callback && callback(false);
   }
   image.onload = function(){
    callback && callback(image.width == 1);
   }
   image.src = "data:image/webp;base64,UklGRiwAAABXRUJQVlA4ICAAAAAUAgCdASoBAAEAL/3+/3+CAB/AAAFzrNsAAP5QAAAAAA==";
  };
 
  testWebp(function(flag){
   if(flag){
    alert('恭喜，瀏覽器支持webp');
   }else{
    alert('抱歉，瀏覽器不支持webp');
   }
  });