圖片優化瘦身 給網站提速

1. 爲何用 webp?

科技博客 Gig‍‍‍aOM 曾報道：YouTube 的視頻略縮圖採用 WebP 格式後，網頁加載速度提高了 10%；谷歌的 Chrome 網上應用商店採用 WebP 格式圖片後，天天能夠節省幾 TB 的帶寬，頁面平均加載時間大約減小 1/3；Google+ 移動應用採用 WebP 圖片格式後，天天節省了 50TB 數據存儲空間。

一樣的質量下，更小的體積，更快的加載速度。

爲何不用？

阻止咱們用webp大概出於兩個考慮

（1）與JPG相比較,解碼速度慢1.5倍

不少性能的瓶頸在於傳輸的速度，而不是解碼的速度 (這也是固態硬盤對電腦提高明顯的緣由)，

縮短的加載時間遠遠大於解碼所須要的時間。

參考自 探究WebP一些事兒 測試demo

（2）兼容問題

2. webp兼容問題

webp的兼容性不是很樂觀，尤爲在ios safari上一片紅。 這裏咱們在客戶端用js檢測是否支持WebP，支持請求webp圖片，不支持保持原格式。

下面是Google官方提供的檢測代碼 能夠檢測 瀏覽器對 webp lossy 有損 lossless無損 alpha透明 animation動圖的支持

function check_webp_feature(feature, callback) {
var kTestImages = {
    lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
    lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
    alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
    animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
};
var img = new Image();
img.onload = function () {
    var result = (img.width > 0) && (img.height > 0);
    callback(feature, result);
};
img.onerror = function () {
    callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
複製代碼

}

咱們公司的使用場景比較簡單，檢測webp的有損格式就行

(function check_webp_support() {
    var _KEY = "lvtou_ifSupportWebp";
    var ifCheckAlready = window.localStorage[_KEY];

    if (ifCheckAlready) {
      return ifCheckAlready;
    } else {
      check_webp_feature("lossy", function(feature, result) { 
        //localStorage只能存儲字符串
        window.localStorage[_KEY] = result ? 'true' : 'false';
      });
    }
  })();
複製代碼

3. 使用方法

檢測到支持後，把圖片的連接改爲webp的就行

咱們公司用七牛雲作cdn。 七牛使用webp比較簡單，只要在原來請求的連接後面拼接上一些參數就行。

原連接 196kb

http://www.***.com/test.jpg

webp連接 30.4kb

http://www.***.com/test.jpg?imageMogr2/format/webp

拼接的參數 能夠用七牛雲的圖片樣式精簡，這裏不作展開，官方有視頻教程。

4. 懶加載 lazysizes

圖片是網頁中流量佔比最多的部分， 不在可視區域的圖片是不必發起請求的。

通常都會作懶加載，我用的是 lazysizes。

lazysizes的使用比較簡單，引入以後，不須要初始化。 把須要懶加載的圖片加上lazyload的class，再 data-src 存儲src就行。

<img data-src="image.jpg" class="lazyload" />
複製代碼

webp和lazysizes結合，只須要 在 lazysizes 提供了的生命週期鉤子函數裏修改data-src的值就行。

lazybeforeunveil是把data-src替換成src以前的鉤子。

document.addEventListener("lazybeforeunveil", function(e) {
    var IMG = e.target;
    var src = IMG.getAttribute("data-src");
    if (window.lvtou_ifSupportWebp) {
      IMG.setAttribute("data-src", src + "?imageMogr2/format/webp");
    }
  });
複製代碼

5.IntersectionObserver

傳統判斷圖片是否在可視區域的辦法是

監聽 scroll 事件,在 scroll 的時候,

比較目標元素的 offsetTop來判斷，

scroll事件觸發很頻繁(通常都會作節流) ，獲取offsetTop的值又會觸發重排，很容易引起卡頓。

應運而生的 IntersectionObserver api 能夠在，

不監聽scroll和觸發重排的狀況下

判斷圖片是否進入可視區。 感興趣的能夠看看 阮一峯大佬 的 教程

6. 圖片加載致使的頁面抖動

... 待更新..

7.最終結果

整站webp以後 ，請求小了一半，不錯的提高。

... ...

最後咱們公司在舉辦活動，對攝影，楹聯文化，和傳統服飾有興趣的朋友 能夠去 微信公衆號 看看