前言

　　不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。

　　但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。

　　对 WebP 的研究缘起于手机 QQ 原创表情商城，由于表情包体积较大，在 2G/3G 的网络环境下加载较慢。同事小贝恰好因为 2013 Google I/O Event 了解到了 WebP，于是我们便一起开始了没羞没躁的技术预研，期待在原创表情图片的质量与体积之间寻找最美的平衡。

　　今年 WebP 图片格式得到越来越多的关注，很多团队也开始布道，前阵子的前端圈“走进腾讯互娱前端技术专场”也有相关专题。借此热潮，在这里把上一年的探索过程以及今年 WebP 新的发展一同分享出来，同时也期待更多的人将其应用于实际业务中。

　　什么是 WebP?

　　WebP(发音 weppy)，是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28% 的文件大小。

　　2010 年发布的 WebP 已经不算是新鲜事物了，在 Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影，而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在我厂很多的项目中得到应用，如腾讯新闻客户端、腾讯网、QQ空间等，同时也有一些针对 WebP 的图片格式转换工具，如智图(http://zhitu.tencent.com)，iSparta(http://isparta.github.io/)等。

　　(Google 已和正在部署的 WebP 的产品)

　　可喜的是，直到今年，Google 对 WebP 依旧投入了持续的热情，2014 年的 Google I/O Event 中也出现了两个介绍 WebP 应用的视频(https://www.google.com)。WebP 已大量应用于全球流量消耗最多的 Google 产品中，你还有理由拒绝它吗?

　　WebP 的优势

　　上面只是简单介绍了这种图片格式的背景和应用，不过 “talk is cheap”，这种格式优势在哪里?除了压缩效果极好，图片质量能否得到保障?这需要更理性客观的数据：

　　这里列举一个简单的测试：对比 PNG 原图、PNG 无损压缩、PNG 转 WebP(无损)、PNG 转 WebP(有损)的压缩效果。更多测试查看 https://isparta.github.io (请用 Chrome 浏览器打开)

　　可以得出结论：

　　PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩

　　转换后的 WebP 体积大幅减少，图片质量也得到保障(同时肉眼几乎无法看出差异)

　　转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

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

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

　　兼容性与可用性

　　现在问题来了：WebP 的支持度和兼容性如何?

　　根据对目前国内浏览器占比与 WebP 的兼容性分析，大约有 50% 以上的国内用户可以直接体验到 WebP，如果你的网站以图片为主，或者你的产品基于 Chromium 内核，建议体验尝试。假如你打算在 App 中使用 WebP，除了 Android4.0 以上提供的原生支持外，其他版本以及 iOS 都可以直接使用官方提供的解析库(Android 、iOS )。

　　为了验证 WebP 图片格式的业务可行性，我们从流畅度、解码耗时、CPU 使用、内存占用几个维度进行的分析，在开发同学们的帮助下得到了非常宝贵的测试数据：

　　测试一：

　　AndroidQQ 下 PNG 和 WebP 各指标对比。

　　测试环境：AndroidQQ、Galaxy Nexus、Android4.2.2 系统

　　测试对象：WebP、PNG

　　测试数据(部分)：

　　测试结论：

　　解码耗时：WebP 的解码时间是 PNG 格式的 4.4 倍(24.8ms)

　　流畅程度：两种格式下，AIO 滑动流畅度无明显差异

　　CPU使用：两种格式下，连续发送 15 个表情，CPU 使用均在 10%—26% 之间波动，两者无明显差异

　　内存占用：两者格式下，连续发送 15 个表情，PSS 内存占用跨度均为 11M，无明显差异

　　测试二：

　　iPhoneQQ 下 PNG 和 WebP 各指标对比。

　　测试环境：iPhoneQQ、iPhone4、iOS5.1.1 系统

　　测试对象：WebP、PNG

　　测试数据(部分)：

　　测试结论：

　　解码耗时：WebP 的解码时间是 PNG 的 5 倍 左右(64.1ms)

　　流畅程度：WebP 的 FPS 平均值会比 PNG 的平均值要小，但是比较稳定，跨度不大，性能也相差不大

　　CPU使用：总体上看，PNG 格式的表情使用 CPU 波动比较大。从平均值来看 WebP 格式表情占用的 CPU 会比 PNG 表情的占用率大

　　内存占用：WebP 格式表情，占用内存的跨度为 4M，波动比较明显。PNG 格式表情，占用内存的跨度为 5M，没有明显波动。停止发送表情后，40s 左右内存均有回降

　　可见除了 WebP 在解码时间与 PNG 有较明显差异(毫秒级别)之外，总体使用体验和 PNG 基本无差异。同时也需要明确，移动设备的发展迅猛，硬件升级快，上一年的表现也许在今年又有了明显的提升。所以，在 App 中使用 WebP 基本没有技术阻碍。

　　对原创表情商城的技术指导

　　在验证了业务可行性之后，WebP 又激发了我们对另外一些方向的思考：既然它表现如此优秀，能否进一步摸清其“秉性”，得到一些能在未来使用中遵循的指导方案?

　　于是，为了更深入了解 WebP 特性，我们针对原创表情项目 “不同的表情图片，如何获得 WebP 的最佳压缩效率” 问题继续展开探究，主要从图片规格、色彩数(颜色数量)、参数配置几个维度进行：

　　探索一：图片规格

　　通过阅读文献了解到 WebP 使用的是 Fancy 采样算法，既然是采样算法必然有采样区块，而 JPEG 的采样区块是 8*8，对于原始图片的长宽不是 8 的倍数，都需要先补成 8 的倍数，使其能一块块的处理，所以对于 8 的整数倍的图片，压缩会更高效。

　　那么 WebP 的采样区块会是多少?我们在其他因素保持不变的前提下改变图片规格，选取了 200*200 附近多个规格值，得到了一些数据。将数据可视化之后可以看到凡是以 16*16 倍数(160*160、176*176、192*192、256*256)为规格的图片，有损压缩的比例都明显大于以 4*4 或 8*8 的倍数为规格的图片。

　　结论：

　　原创表情可以考虑使用 “16n*16n” 的规格。目前原创表情选择的是 200*200 的规格大小，实际上选择 256*256 或者 192*192 能获得更高的 WebP 压缩效率，量级在千分之几。

　　探索二：色彩数

　　在 JPEG 和 PNG 格式的选择经验上可以知道，对于色彩复杂的图片，一般使用 JPEG 格式，而对于色彩单一的图片，使用 PNG 格式。可见色彩数会影响图片的压缩效果。于是我们通过 Photoshop 中的色阶分离功能调整表情图片的色彩数，在其他因素保持不变的前提下对比不同色彩数对于 WebP 有损无损压缩的影响。