WebP 在减小图片体积和流量上的效果如何？—— WebP 技术实践分享

做者 | Jackson
编辑 | 尾尾

不管是 PC 仍是移动端，图片一直占据着页面流量的大头，在图片的大小和质量之间如何权衡，成为了长期困扰开发者们的问题。而 WebP 技术的出现，为解决该问题提供了好的方案。本文将为你们详细介绍 WebP 技术，同时也会分享该技术在 MIP 项目)中的实践。

1、什么是 WebP ？

WebP 是由 Google 收购 On2 Technologies 后发展出来的图片格式，以BSD受权条款发布。目前已经在不一样厂商之间进行了尝试，如Google、Facebook、ebay、百度、腾讯、淘宝等。

2、为何选择 WebP？

1. WebP 的优点

WebP 在支持有损、无损、透明图片压缩的同时，大大减小了图片的体积。据统计，WebP 无损压缩后比 PNG 图片体积减小了 26%，有损图片比同类 JPEG 图像体积减小了 25%~34%，下面总结 WebP 在不一样指标上所能得到的提高对比。

（1）体积和流量方面

根据业界给出的改造数据可知，改造 WebP 以后图片体积会下降不少，具体可参照 WebP 体积测试连接，同时也可参照下图。

图片

在 MIP 项目)中，经过咱们的本地测试得到的数据以下图所示。

图片

从以上测试可知，若是将体积换算成带宽，WebP 不一样模式下都会节省大量流量。科技博客 Gig‍‍‍aOM 曾报道，谷歌的 Chrome 网上应用商店采用 WebP 格式图片后，天天能够节省几 TB 的带宽；Google+ 移动应用采用 WebP 图片格式后，天天节省了 50TB 数据存储空间。

（2）速度方面

图片的加载速度还要取决于网络时间，因此咱们没有测试肯定的数据，不过能够参考业界的数据：科技博客 Gig‍‍‍aOM 曾报道，YouTube 的视频略缩图采用 WebP 格式后，网页加载速度提高了 10%；谷歌的 Chrome 网上应用商店采用 WebP 格式图片后，页面平均加载时间大约减小 1/3。

2. 兼容性

目前来讲，WebP 的支持程度也在不断上升，据 2017年10月12日在 can i use 上的查询显示，全球 WebP 的支持程度已经达到 73.64%，以下图所示。

WebP 支持程度图解

而也正是由于这种自然的图片体积优点和发展趋势，MIP 团队也决定进行初步的实践尝试，以提高页面用户体验。

3、WebP 实践经验

1. 如何判断浏览器支持程度？

WebP 的判断方法在官方文档中进行了总结，大体分为 HTML5 picture、嗅探和Request Header三种方式，下面展开介绍这三种方式。

（1）HTML5 picture

这种方法不进行 WebP 支持程度的判断，而是利用 html5 picture 元素的特性，容许开发者列举出多个图片地址，浏览器根据顺序展现出第一个可以展示的图片元素，如

<picture>
    <source type="image/webp" srcset="images/webp.webp">
    <img src="images/webp.jpg" alt="webp image">
</picture>复制代码

上面的示例在浏览器不支持 WebP 图片的状况下自动回退到 jpg 格式进行展现，但 picture 的支持程度还不是很完善，开发者能够根据需求决定是否进行使用。

图片

（2）嗅探

嗅探的方式是指直接向浏览器中插入一段 base64 的 WebP 图片，检测图片是否可以正常加载，依据该方法进而判断支持程度，如官方给出的嗅探函数：

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
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 图片的嗅探，这是一种最为保险的方法。不过缺点也很明显，在图片类型不一且量级较大的状况下，前端并不能知道哪些图片是有损，无损，亦或是透明的，也没有办法对其中一种特定类型作特定策略，因此即便知道不支持该类型的 WebP，然而咱们也没有办法主观的去作容错。因此这种方法只适合于图片类型单一的状况，如开发者知道全部图片都是有损的，或是动图等，有针对性的去处理。

同时在处理的过程当中，为了提升嗅探效率，嗅探以后能够将结果以本地存储的方式进行保存，如cookie ，方便下次直接进行调用。

（3）Request Header

这种方式是较为符合标准的解决方案，浏览器在支持 WebP 图片格式的状况下，会在请求的 http header accept 中携带 webp/image 的字段，后端接收到请求以后能够按照该形式来判断是否返回 WebP 图片内容。

MIP 在实践中采用的是该方法，当用户访问 MIP Cache 上的页面时，不须要开发者替换图片，MIP Cache 根据 http header 自动决定是否返回 WebP 图片内容。

不过这个过程也依然有坑——国内浏览器层出不群，大部分都向标准化的方向靠近，但仍然须要必定的时间来跟进。因此，在实践过程当中咱们就发现了这样的问题：虽然 http header accept 中包含了 webp/image 的字段，但其实是不支持 WebP 格式的（华为 MT7 自带浏览器），具体体如今动图（animation）的 feature 上。而相应的解决方案其实也很简单，就是在 WebP 图片加载失败后发起原图请求，让图片可以正确的展现在页面上，具体方式是经过 img onerror 函数执行对应逻辑。

2. WebP转换工具

WebP 的转换工具不少，主要包含了命令行和可视化界面两种：

（1）命令行

官方对于每一种 WebP 格式也分别提供了对应的转换工具，主要包含了cwebp、dwebp、vwebp、webpmux、gif2webp 等几种，开发者能够择优选择。

（2）可视化

页面也提供了不一样可视化的软件进行 WebP 格式图片转换，如：iSparta。

4、总结

WebP 做为一种新型图片格式，不但可以节省流量，减小图片体积，必定程度上也能够优化用户体验。MIP 项目对于 WebP 支持目前已上线，你们能够浏览 MIP 页面进行体验。同时做为关注速度优化的 MIP 团队，咱们将不断迭代前行，致力于打造极致的用户体验。