png 转 webp 的正确姿势

[leeenx]

png图片压缩

常用的压缩工具：tinypng 或 腾讯智图 等。

图片经过多次压缩后会达到极限，并且压缩后的图片可能受损以至无法使用！如下：

png的极限压缩并不能带来高质量的图片，适应压缩才是王道。

想得到高质量低体积的图片，可以考虑使用 webp。

webp

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

来源: ISUX -- WebP 探寻之路

webp官网给出的文档压缩率并没有这么高，如下：

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

来源：A new image format for the Web

按官方说法，png转成webp最少也能减少 25%的文件大小。

以下是webp各浏览器的支持情况:

来源： [caniuse](http://caniuse.com/#search=webp)

另外，微信手Q（X5）的支持情况如下：

来源：[How well x5 browser support HTML5?](http://res.imtt.qq.com/qqbrowser_x5/h5/h5_support.htm)

android 4.0以上和X5内核全面支持 webp格式，IOS暂时不支持

Webp 转换工具

线上工具：腾讯智图 、ppms-photo(http://ppms1.jd.com/photo)
本地工具：WebP Converter

WebP Converter 的安装请参见：https://developers.google.com/speed/webp/

mac 可用 homebrew 安装:

sudo brew install webp

使用以下指令转换 webp

cwebp -q 80 image.png -o image.webp

具体参见：https://developers.google.com/speed/webp/docs/cwebp

ppms-photo

ppms-photo（http://ppms1.jd.com/photo）自带了图片转换webp格式的功能。只需要在上传图片后，在图片地址的后缀加上 .webp 即可以得到webp格式的图片。

以下是图片 1.png (372K) 上传到 ppms-photo 后生成的图片

http://img11.360buyimg.com/jdphoto/s750x1206_jfs/t2911/75/1468163299/372024/bdff05c6/5785a30aN0a87d9a7.png

添加 .webp，得到webp格式的图片

http://img11.360buyimg.com/jdphoto/s750x1206_jfs/t2911/75/1468163299/372024/bdff05c6/5785a30aN0a87d9a7.png.webp

ppms-photo 有一个强大的功能：按质量取webp图。

http://img11.360buyimg.com/jdphoto/s750x1206_jfs/t2911/75/1468163299/372024/bdff05c6/5785a30aN0a87d9a7.png.webp 为例，

如果想获取质量为75%的图片，可以在.png.webp前加!75获得：

http://img11.360buyimg.com/jdphoto/s750x1206_jfs/t2911/75/1468163299/372024/bdff05c6/5785a30aN0a87d9a7!q75.png.webp

不在过观察过程中发现，ppms-photo转换webp时质量存在一个质量上限值：80%。可以 智图 、ppms-photo or WebP Converter 这个章节中看到数据。

WebP推荐质量75%

webp默认是有损压缩的，默认质量 75%，同时也是推荐值。

原图 与 75%WebP 对比：

来源：智图

本人观察不出 webp 的质量损失。

质量100%WebP 与 质量75%WebP 文件大小对比：

原图: 1.png 372K
质量100%WebP: 1.png 104K
质量75%WebP: 1.png 16K

视觉对比无差别而文件大小却相差 6~7倍，这个观察结果足使 75% 做为推荐值。

智图 、ppms-photo or WebP Converter

WebP Converter: 0.4.3
智图：2016.07.12(没有版本号，取日期)
ppms-photo：2016.07.12(没有版本号，取日期)

智图与WebP Converter的转换率如下：

质量	智图	ppms-photo	WebPConverter	质量	智图	ppms-photo	WebPConverter
100%	-	18.9K	104K	-	-	-	-
95%	83.2K	19000B	49552B	60%	22.8K	14224B	14224B
90%	62.7K	19000B	31718B	55%	20.2K	13458B	13458B
85%	43.4K	19000B	23716B	50%	18.8K	12842B	12842B
80%	40.7K	19000B	19000B	40%	14.6K	11490B	11490B
75%	36K	16188B	16188B	30%	14.2K	10180B	10180B
70%	30.6K	15434B	15434B	20%	14K	8960B	8960B
65%	25K	14684B	14684B	10%	13.2K	7528B	7528B

原图： 1.png (372K)

ppms-photo跟WebP Converter转换率一样（ppms-photo使用的是WebP Converter），WebP Converter 全面优于智图。
建议使用 WebP Converter 或 ppms-photo 来做为 Webp的转换工具。

压缩对webp的影响

按官方或是ISUX描述，可能会有这样的观点：压缩后的图片转webp可得到更小的图片。

做个简单验证:

图片: 1.png (372K)
压缩工具：tinypng
webp： WebP Converter 和 智图

压缩次数	png	webp	webp(智图)
0	372K	15.80K	36K
3	172K	18.55K	70.2K
6	156K	26.28K	108.3K
9	141K	33.32K	140.5K
12	134K	37.37K	152.3K
本节webp的质量为75%

通过上面的数据，得到一个相反的结论：webp文体大小与图片压缩次数成正比

这个验证同时又一次证明智图是一个很差的webp工具！转换的结果是对ISUX的打脸

结论

使用官方的 WebP Converter 做为转换工具，并且图片转换前不要做任何图片压缩！

[wanggao]

这篇文档给我科普了很多知识，非常感谢，亲测了一下目前智图的版本和WebP Converter的压缩效果，我贴下我的数据，一张1M的png，智图压缩后是138K，webp压缩后是207K，应该是这几年智图的压缩算法优化过了😊

[leeenx]

@wanggao 应该是毕竟过去3年多了