把網站的圖片升級到WebP格式吧

WebP格式介紹

WebP是Google開發的一種新的圖片格式，它支持有損壓縮、無損壓縮和透明度，壓縮後的文件大小比JPEG、PNG等都要小。因此能夠節省帶寬，減小頁面載入時間，節省用戶的流量。

Android和iOS的app只要引入Google提供的解碼庫，均可以很輕鬆的支持WebP格式。不過在web上，WebP的支持還不是很普遍，根據Can I Use的數據，目前只有Chrome、Opera瀏覽器，以及Android的WebView是支持WebP的。可是WebP圖片有這麼多優勢，咱們能不能在web頁面中使用呢？能夠。這篇文章就來討論一下這個問題。

把已有的圖片轉換爲WebP格式

要使用WebP格式，須要將你網站用到的圖片都製做一份WebP格式的版本，若是你使用CDN服務商，它們通常都會提供轉碼到WebP格式的選項。如又拍雲：

增長這樣的配置後，咱們能夠經過給圖片URL加上相應的後綴，來使用WebP格式的版本資源。

你也可使用webpack、gulp的插件來批量轉換圖片格式。這裏不贅述。

在瀏覽器中使用WebP格式

由於不是全部瀏覽器都支持WebP格式，咱們就有兩種思路：一個是隻在支持WebP格式的瀏覽器中使用WebP格式；一個是讓不支持WebP格式的瀏覽器能夠支持WebP。

姿式一： <picture>標籤

<picture>是HTML5中的一個新標籤，相似<video>它也能夠指定多個格式的資源，由瀏覽器選擇本身支持的格式進行加載。

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

若是瀏覽器支持WebP格式，就會加載image.webp，不然會加載image.jpg。

即便瀏覽器不支持<picture>標籤，圖片仍然會正常顯示，只是CSS可能沒法正確選取到picture元素。好比在IE8中，下面的CSS就不會起做用：

.picture img {
  width: 100px;
  height: 100px;
}

可是能夠這樣來給圖片寫樣式：

.image {
  width: 100px;
  height: 100px;
}

即便瀏覽器使用的是WebP格式的圖片，最終仍是會應用img元素的樣式。

不過只要使用了html5shiv，使舊的瀏覽器支持這個標籤，CSS選擇器就能夠正常使用了。

這種方法是最簡單的，可是不能做用於CSS中的圖片（如背景）。

姿式二：使用JS替換圖片的URL。

咱們有不少的頁面每每會用到圖片的「懶加載」——一般是把圖片的URL放在img元素的一個自定義屬性中，而後用JS在適當的時機將URL賦值給src屬性。用相似的原理，咱們能夠根據瀏覽器是否支持WebP格式，給img元素賦予不一樣的src值。

首先咱們須要用JS來判斷瀏覽器是否支持WebP格式，方法是給瀏覽器一個WebP格式的圖片，看瀏覽器可否正確渲染。這種方法是異步的，因此須要把後續的操做寫在回調函數中。咱們能夠將結果存儲在localStorage中，這樣以後就不用再次檢查了。

function checkWebp(callback) {
  var img = new Image();
  img.onload = function () {
    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

而後用下面的代碼來根據是否支持WebP替換相應的src。

function showImage(useWebp){
  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){
    var src = i.attributes['data-src'].value;

    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

這種方式的優勢是能夠與已有的懶加載函數相結合。並且使用JS，咱們還能夠處理CSS中的圖片（如背景圖等）。

姿式三：使用JS解碼WebP圖片

既然WebP的解碼器是開源的，那麼可否用JS來實現呢？固然能夠，有人就用JS寫出了WebP的解碼器。引入這個JS庫，就是將全部的WebP圖片用JS解碼後轉換爲base64，而後替換掉原來的URL，這樣就可讓本來不支持WebP的瀏覽器正常顯示WebP了。這個庫的使用方法很是簡單，看網頁的說明便可。

這種方法的缺點是，由於JS要解碼WebP圖片，須要在此異步請求src中的URL（不過由於圖片自己以前被下載了一次，直接使用了緩存）；並且JS解碼比較慢，對性能有影響，可能須要一段時間才能顯示出圖片來。

---

以上就是在瀏覽器中使用WebP圖片的幾種方法，能夠根據本身的實際狀況選用。在咱們的實踐中，使用了WebP格式後，圖片的體積廣泛縮小了1/3以上，既加快了加載的速度，還節省了用戶的流量，咱們十分推薦從如今就開始使用這種格式。