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之后，请求小了一半，不错的提升。

... ...

最后我们公司在举办活动，对摄影，楹联文化，和传统服饰有兴趣的朋友可以去 微信公众号 看看