Webp 在项目中的尝试

[Hancoson]

A new image format for the Web. ——Google

想必对 Webp 格式的图片已经有过很多的了解，都知道它可以降低图片的体积，但兼容性不好等等。今天，我就从具体的项目中来说说 Webp 。

使用背景

外界因素

并非所有浏览器都支持 WebP，但是还要使用，所以很重要的是你得清楚哪些浏览器是支持的，这可能会影响你做决定，是否在你的网站或项目中采用 WebP 图片。下面是所有主流浏览器及其 WebP支持程度（截止 2018 年 12月）。

从图片可以看出，市面上的浏览器已经达到 72.85% 的支持率，这已经是个不低的数据了。

WebP 支持度在 70% 左右浮动，使用这种图片格式来替代 PNG 和 JPEG 是有意义的。还有重要的一点要提到，无论如何实现 WebP，我们只是为支持的浏览器提供 WebP 服务，而为其他浏览器提供 PNG 或 JPEG。当然，到这里还有另外一些东西需要考虑，如浏览器市场份额，WebP 相对于 PNG 和 JPEG 的文件体积大小等。

浏览器市场份额

Clicky 截至 2017 年 12 月的数据显示，Chrome 占有市场份额为 59% 的，Firfox 以大约 14% 排名第二。

从上面的数据可以看到，Chrome 占有约 59% 的市场份额，所以必须意识到，如果在项目中加入 Webp 图片，大多数访客都会看到 WebP 版本，其他用户看到其他图片的版本。

WebP 文件体积

已经有大量研究比较了 WebP 与 PNG、JPEG 的文件体积。下面来看看其中一条：

• JPG 转 WebP – 压缩大小比较：
  WebP 平均减小了 85.87% 的文件提交。加载时间降低了 11%，页面整体大小减少了 29%。

• PNG 转 WebP – 压缩大小比较：
  WebP 平均减小了42.8% 的文件提交。加载时间降低了 3%，页面整体大小减少了 25%。

好了，我还是再举一个实际的例子看看 PNG 和 Webp 格式图片的差距：

尽管只有一张图片，也是可以看出可观的差距来。

自身因素

众所周知，我们的活动页面整体大小的 50% 以上都被图片占用了，所以对图片做优化就迫在眉睫了。

如何使用

把 Webp 说的这好，那么接下来就要说说怎么使用了，那就直接上代码了：

// isSupportWebp true--支持||false--不支持
window.isSupportWebp = !![].map && document
    .createElement('canvas')
    .toDataURL('image/webp')
    .indexOf('data:image/webp') == 0;

!![].map 主要是判断是否是IE9+，以免 toDataURL 方法会挂掉。

效果

那么接下来就是说说使用后的效果（数据）了。

那么接下来就是说说使用后的效果（数据）了。

优化前：

优化后：

以上两个活动是复制的双十一的移动端会场。在相同的网络环境下并且在首屏都渲染完成的情况如下：

对比项	优化前	优化后
请求数	61个	20个
首屏加载页面大小	3.1M	484KB
加载完成时间	3.49秒	1.69秒

从数据对比表可以看出性能提升在 50% 以上。当让优化还是要持久做下去，相信以后会更加的好。

参考资料：

• A new image format for the Web
• WebP Support – It’s More Than You Think