【资料】从零开始带你认识最新的图片格式
不管是 PC 还是移动端，图片一直是流量大头，以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求，如何保证在图片的精细度不降低的前提下缩小图片体积，成为了一个有价值且值得探索的事情。 但如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致， 若想改变现状开辟新局面，便要有釜底抽薪的胆量和气魄，而 Google 给了我们一个新选择：WebP。 对 WebP 的研究缘起于手机 QQ 原创表情商城，由于表情包体积较大，在 2G/3G 的网络环境下加载较慢。http://ugc.qpic.cn/gbar_pic/NoFChqEQomFRLialGSagpHib51libDCqWKNwS2zdLRdjia70icLfQIweWAg/0今年 WebP 图片格式得到越来越多的关注，很多团队也开始布道，前阵子的前端圈“走进腾讯互娱前端技术专场”也有相关专题。借此热潮，在这里把上一年的探索过程以及今年 WebP 新的发展一同分享出来，同时也期待更多的人将其应用于实际业务中。
什么是 WebP？ WebP（发音 weppy），是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式 VP8。根据 Google 的测试，无损压缩后的 WebP 比 PNG 文件少了 45％ 的文件大小，即使这些 PNG 文件经过其他压缩工具压缩之后，WebP 还是可以减少 28％ 的文件大小。
在 Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影，而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在腾讯的很多的项目中得到应用，如腾讯新闻客户端、腾讯网、QQ空间等，同时也有一些针对 WebP 的图片格式转换工具，
http://ugc.qpic.cn/gbar_pic/NoFChqEQomFRLialGSagpH6jhA8ibJ8LQU4Rf0ePHoIpjyoygib9HwsiaA/0
WebP 的优势上面只是简单介绍了这种图片格式的背景和应用，不过 “talk is cheap”，这种格式优势在哪里？除了压缩效果极好，图片质量能否得到保障？这需要更理性客观的数据：http://ugc.qpic.cn/gbar_pic/NoFChqEQomFRLialGSagpH9296WAT96myLxTxqwJgXj7W9JDJqZ84icQ/0
可以得出结论：
[*]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 的兼容性分析，大约有 50% 以上的国内用户可以直接体验到 WebP，如果你的网站以图片为主，或者你的产品基于 Chromium 内核，建议体验尝试。假如你打算在 App 中使用 WebP，除了 Android4.0 以上提供的原生支持外，其他版本以及 iOS 都可以直接使用官方提供的解析库（Android 、iOS ）。
为了验证 WebP 图片格式的业务可行性，我们从流畅度、解码耗时、CPU 使用、内存占用几个维度进行的分析，在开发同学们的帮助下得到了非常宝贵的测试数据：
http://ugc.qpic.cn/gbar_pic/NoFChqEQomFRLialGSagpH3AlQsc2IeukaDRMZQJdW16f23oYWWuPhA/0
测试结论：
[*]解码耗时：WebP 的解码时间是 PNG 格式的 4.4 倍（24.8ms）
[*]流畅程度：两种格式下，AIO 滑动流畅度无明显差异
[*]CPU使用：两种格式下，连续发送 15 个表情，CPU 使用均在 10%—26% 之间波动，两者无明显差异
[*]内存占用：两者格式下，连续发送 15 个表情，PSS 内存占用跨度均为 11M，无明显差异
动态 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 等数据
但新兴的事物必然存在不足的地方，Animated WebP 存在的问题：
[*]消耗较多的 CPU 和解码时间（多 1.5~2.2 倍）
[*]和 GIF 相比起来支持度还不够，目前仍无法通用
[*]为了支持 Animated WebP，Chrome 的新内核 Blink 添加了近 1500 行的代码
综合技术方案对于不同场景下 WebP 的使用，我们总结了一些解决方案，如下：
1、若使用场景是浏览器，可以：
[*]JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片
[*]使用 WebP 支持插件：WebPJS
2、若使用场景是 App，可以：
[*]Android 4.0 以下 WebP 解析库
[*]iOS WebP 解析库
3、转换工具：
[*]智图
[*]iSparta
iSparta 是我们组针对 WebP 和 APNG 两种新型图片格式的转化而开发的一款桌面应用，直接图片批量转换为 WebP，同时提供多种参数配置，欢迎体验。
http://ugc.qpic.cn/gbar_pic/NoFChqEQomFRLialGSagpH0XwaiaveG35CsBEBPRxJaOeqiay7B0k7vYg/0
长见识的 支持一下现在格式是越来越多了。。。。。老的去了新的来了更新更新再更新 这个沙发坐的好难呀。不懂这是在干嘛 长知识了 感谢楼主 涨姿势了{:17_1059:} 学习了。。。 好文章 很有用 这个好，一切从简~ 第一次听说这种技术 长见识了。不错，收藏。