图片优化瘦身 给网站提速

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

... ...

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