webp

首先提到webp 我们有可能会感到陌生，那是因为我们或许在项目中还没有用到这个技术，今天我们就一起来了解一下这个新生 “ 儿” 吧！

1、什么是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 的图片格式转换工具，如 智图，iSparta 等。

2、webp的优势？

上图说明

Paste_Image.png

由此我们可以得出结论：

1、PNG 转 WebP 的压缩率要高于 PNG 原图压缩率，同样支持有损与无损压缩
2、转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
3、转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数，不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

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

3、色彩数的选择

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

4、图片的规格

算法这东西我是看不懂，但是看到大牛们的文章，在这里还是要跟大家分享一下
通过阅读文献了解到 WebP 使用的是 Fancy 采样算法，既然是采样算法必然有采样区块，而 JPEG 的采样区块是 8*8，对于原始图片的长宽不是 8 的倍数，都需要先补成 8 的倍数，使其能一块块的处理，所以对于 8 的整数倍的图片，压缩会更高效。

那么 WebP 的采样区块会是多少？我们在其他因素保持不变的前提下改变图片规格，选取了 200200 附近多个规格值，得到了一些数据。将数据可视化之后可以看到凡是以 1616 倍数（160160、176176、192192、256256）为规格的图片，有损压缩的比例都明显大于以 44 或 88 的倍数为规格的图片。

综合结论：
对于不同场景下 WebP 的使用，我们总结了一些解决方案，如下：
1、若使用场景是浏览器，可以：
JavaScript 能力检测，对支持 WebP 的用户输出 WebP 图片
使用 WebP 支持插件：WebPJS

2、若使用场景是 App，可以：
Android 4.0 以下 WebP 解析库（链接）
iOS WebP 解析库（链接）

3、转换工具：
智图
iSparta

iSparta 是我们组针对 WebP 和 APNG 两种新型图片格式的转化而开发的一款桌面应用，直接图片批量转换为 WebP，同时提供多种参数配置