对原创表情商城的技术指导
在验证了业务可行性之后，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 之间。
结论：建议原创表情尽量控制颜色数在 256 色以内，采用无损压缩性价比最高。
小于 256 色：以图标，图形，剪贴画为代表，最适合采用 WebP 无损压缩，精细度完美，体积大幅减少;
大于 256 色：以多数表情图，广告图为代表，最适合采用 WebP 有损压缩，选择较高压缩比(建议压缩质量为 100% ~ 75%)
远大于 256 色：以风景照，视频截图为代表，最适合采用 WebP 有损压缩，选择适中压缩比(建议压缩质量为 75% 以下)
探索三：色温、渐变与杂色、直线与直线、描边
随后又从色温、渐变与杂色、直线曲线、是否需要描边上进行了分析，最后的结论即：
色温并不会影响表情图片的压缩效果，可大胆用色
渐变与杂色理论上都是增加色彩数，它的压缩规律从符合第二条，但建议表情图片少用渐变杂色和不必要的线条
直线与曲线理论上也是增加了色彩数(因为曲线边缘会存在渐变)，建议如果表情中可以“直”的地方就不要“弯”
WebP 格式的图片不会存在毛边问题，所以不需要为表情图片添加描边
探索四：压缩配置
为了得到无损压缩和有损压缩的最佳压缩配置，我们通过对 900 张表情图片进行不同压缩配置的测试(大部分表情图片的色彩数都在 256 色以上)，得到下面的数据：
压缩参数说明：
-lossless：无损压缩
-q：压缩质量，值越大越图片质量越好
-m：压缩方式，值越大则图片质量越好，体积越小，但是耗时较长
可以发现，无损压缩表现很稳定，压缩质量越高，压缩效果也越好。而有损压缩在压缩质量设置为 75 以上之后，压缩效果反而减弱，甚至压缩后的图片体积会大于压缩前的体积。所以得出以下结论：
选择无损压缩时，“-lossless -q 100” 是最佳方案
选择有损压缩时，“-q 75”是最佳方案(图片质量与体积大小达到均衡)
无论何种压缩参数，加上“-m 6”都能使得输出的 WebP 图片进一步减少体积，量级是1%~2%，但是会增加耗时
最终，得出了一个正反面案例，从技术角度分析不同的表情图标的优劣(强调一下是“技术角度”，这里列举的表情都很赞 ^_^)。
动态 WebP 初探
了解完静态 WebP，下面再了解一下动态 WebP(Animated WebP)：2013 年 11 月 21 日，Animated WebP 终于取得进展，并在 Chrome32 Beta 中得到了支持。目前 Animated WebP 支持将 GIF 直接转换成 Animated WebP，或者将多张 WebP 图片组合成 Animated WebP。与传统的 GIF 图比较，Animated WebP 的优势在于：
支持有损和无损压缩，并且可以合并有损和无损图片帧
体积更小，GIF 转成有损 Animated WebP 后可以减小 64% 的体积，转成无损可以节省 19% 的体积
颜色更丰富，支持 24-bit 的 RGB 颜色以及 8-bit 的 Alpha 透明通道(而 GIF 只支持 8-bit RGB 颜色以及 1-bit 的透明)
添加了关键帧、metadata 等数据
假如你在使用 Chrome32 以上的浏览器，可以点这里体验。
但新兴的事物必然存在不足的地方，Animated WebP 存在的问题：
消耗较多的 CPU 和解码时间(多 1.5~2.2 倍)
和 GIF 相比起来支持度还不够，目前仍无法通用
为了支持 Animated WebP，Chrome 的新内核 Blink 添加了近 1500 行的代码
根据自己实际的测试，发现 Animated WebP 的压缩效果较不稳定，在默认压缩配置下达不到 Google 官方提供的示例效果。但 Animated WebP 依然有很多值得期待的空间，值得继续关注。
综合技术方案
对于不同场景下 WebP 的使用，我们总结了一些解决方案，如下：
1、若使用场景是浏览器，可以：
JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片
使用 WebP 支持插件：WebPJS
2、若使用场景是 App，可以：
Android 4.0 以下 WebP 解析库(链接)
iOS WebP 解析库(链接)
3、转换工具：
智图
iSparta
iSparta 是我们组针对 WebP 和 APNG 两种新型图片格式的转化而开发的一款桌面应用，直接图片批量转换为 WebP，同时提供多种参数配置，欢迎体验。
参考文献
http://en.wikipedia.org/wiki/WebP
https://developers.google.com/speed/webp/
http://tech.qq.com/a/20140721/074637.htm
http://faso.me/slides/2014/webp/
http://www.webpagetest.org/video/compare.php?tests=141121_3W_JT7,141121_6Q_JSM
本文链接：http://www.mobileui.cn/latest-image-format-webp.html
