WebP 方案分析与实践

对于网站来说，图片始终扮演着重要角色。图片大小直接影响网站速度、流量、运营成本以及用户体验。因此，减少图片大小成为网站优化最重要的一个环节。

如果你对优化还不甚了解，推荐阅读如下文章：
1.网站优化实战
2.网站优化工具
3.CSS 渲染原理以及优化策略
4.网站性能指标 - FMP
5.聚焦 Web 性能指标 TTI
6.Web「性能测试」知多少？

一、背景

当我们在做网站性能优化的时候，减少图片大小，意味着减少了网络传输，提升了网站加载速度，而这部分也是性价比最高的。

我们可以通过压缩图片来减少体积，但压缩比例一直是前端开发和设计师争执的焦点。压缩比例大的话，可以有效减少图片体积，对页面加载有利，但是却损失了像素，是设计师无法容忍的。

在这种矛盾的场景下，我们既要最大程度的压缩图片又要保持足够的清晰，WebP 便应运而生。

二、目标与意义

1.时间成本
我们先来看一组数据对比图，如果你做过 Gif 动图，你肯定知道下面这样的处理意义有多大：

2.带宽成本

• YouTube 的视频略缩图采用 WebP 格式后，网页加载速度提升了 10%；
• 谷歌的 Chrome 网上应用商店采用 WebP 格式图片后，每天可以节省几 TB 的带宽，页面平均加载时间大约减少 1/3；
• Google+ 移动应用采用 WebP 图片格式后，每天节省了 50TB 数据存储空间。

目前 Google、Facebook、阿里、京东的等国内外互联网公司广泛应用了 WebP，超过 70% 的浏览器已经支持 WebP。

三、什么是 WebP ？

优势在于它具有更优的图像数据压缩算法，在拥有肉眼无法识别差异的图像质量前提下，带来更小的图片体积，同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

在尝试一些技术前，我们必须要充分了解他的兼容性，如下图：

可以看出来，绝大多数浏览器已经有了较好的支持。当然，除了 Safari 和 IE！我们来看看浏览器市场占有率吧：

四、应用场景

WebP 看起来不错，那么它究竟适合什么样的场景呢？不着急，我们先来看下面的图例：

从上面我们可以看出，适合 WebP 场景的站点不外乎如下几种场景：
1.网站图片比重大
如果你的网站 80% 甚至更多依赖图片资源，那么请使用 WebP，资源成本可以较少 50% 以上。

2.细节要求不高
图片起到占位目的，不需要毛孔级别，那么请大胆使用！

3.流量运营推广
运营推广都是抢占先机，我们不但要和竞品比拼用户，更要快速响应，提高转化率。

4.视频首图
视频内容形式的网站，资源存储必是一大难题。如何做到稳准狠，速度必不可少，大量的视频占位图也便成为了重中之重。

五、实践方案

相信到这里，你已经对 WebP 有了足够的了解，快来看看实际项目中我们是如何使用的吧～

方式一：HTML5 Picture
Picture 元素允许我们在不同的设备上显示不同的图片，一般用于响应式。

1
2
3
4

<picture>
  <source type="image/webp" srcset="images/jartto.webp">
  <img src="images/jartto.jpg" alt=“jartto’s demo">
</picture>

Picture 算是最简单易行的方案了，但是需要注意以下两点：
1.兼容性，IE 不支持，可以查看Picutre Element；
2.老项目迁移成本较大，需要改动每一个 IMG 资源，请尽可能封装成组件；

方式二：Webpack + Nginx
此方案在 Webpack 打包过程生成了 .webp 格式的图片，通过