时间: 2021-07-30 10:35:23 人气: 8 评论: 0
不管是 PC 还是移动端，图**一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图**的质量提出了更高的要求，如何保证在图**的精细度不降低的前提下缩小图**体积，成为了一个有价值且值得探索的事情。
但如今对于 JPEG、PNG 和 GIF 这些图**格式的优化几乎已经达到了极致， 若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。
对 WebP 的研究缘起于手机 ** 原创表情商城，由于表情包体积较大，在 2G/3G 的网络环境下加载较慢。同事小贝恰好因为 2013 Google I/O Event 了解到了 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 也在我厂很多的项目中得到应用，如**新闻客户端、**网、**空间等，同时也有一些针对 WebP 的图**格式转换工具，如 智图，iSparta 等。
（Google 已和正在部署的 WebP 的产品）
可喜的是，直到今年，Google 对 WebP 依旧投入了持续的热情，2014 年的 Google I/O Event 中也出现了两个介绍 WebP 应用的视频。WebP 已大量应用于全球流量消耗最多的 Google 产品中，你还有理由拒绝它吗？
上面只是简单介绍了这种图**格式的背景和应用，不过 “talk is cheap”，这种格式优势在哪里？除了压缩效果极好，图**质量能否得到保障？这需要更理性客观的数据：
这里列举一个简单的测试：对比 PNG 原图、PNG 无损压缩、PNG 转 WebP（无损）、PNG 转 WebP（有损）的压缩效果。更多测试查看这里（请用 Chrome 浏览器打开）
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 使用、内存占用几个维度进行的分析，在开发同学们的帮助下得到了非常宝贵的测试数据：
测试数据（部分）：
测试数据（部分）：
可见除了 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 有损无损压缩的影响。
可见，在色彩数相对较少的前提下，无损压缩的效果要优于有损压缩；而色彩数很多时，有损压缩效果要优于无损压缩，这个分界点在 256±100 之间。
随后又从色温、渐变与杂色、直线曲线、是否需要描边上进行了分析，最后的结论即：
为了得到无损压缩和有损压缩的最佳压缩配置，我们通过对 900 张表情图**进行不同压缩配置的测试（大部分表情图**的色彩数都在 256 色以上），得到下面的数据：
可以发现，无损压缩表现很稳定，压缩质量越高，压缩效果也越好。而有损压缩在压缩质量设置为 75 以上之后，压缩效果反而减弱，甚至压缩后的图**体积**大于压缩前的体积。所以得出以下结论：
最终，得出了一个正反面案例，从技术角度分析不同的表情图标的优劣（强调一下是“技术角度”，这里列举的表情都很** ^_^）。
了解完静态 WebP，下面再了解一下动态 WebP（Animated WebP）：2013 年 11 月 21 日，Animated WebP 终于取得进展，并在 Chrome32 Beta 中得到了支持。目前 Animated WebP 支持将 GIF 直接转换成 Animated WebP，或者将多张 WebP 图**组合成 Animated WebP。与传统的 GIF 图比较，Animated WebP 的优势在于：
假如你在使用 Chrome32 以上的浏览器，可以点这里体验。
根据自己实际的测试，发现 Animated WebP 的压缩效果较不稳定，在默认压缩配置下达不到 Google 官方提供的示例效果。但 Animated WebP 依然有很多值得期待的空间，值得继续关注。
对于不同场景下 WebP 的使用，我们总结了一些解决方案，如下：
iSparta 是我们组针对 WebP 和 APNG 两种新型图**格式的转化而开发的一款桌面应用，直接图**批量转换为 WebP，同时提供多种参数配置，欢迎体验。
原文来自： **ISUX
