H5Skills
H5Skills copied to clipboard
o2team
png 转 webp 的正确姿势
png图片压缩
图片经过多次压缩后会达到极限，并且压缩后的图片可能受损以至无法使用！如下：
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 后生成的图片
添加 .webp，得到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 做为转换工具，并且图片转换前不要做任何图片压缩！
这篇文档给我科普了很多知识，非常感谢，亲测了一下目前智图的版本和WebP Converter的压缩效果，我贴下我的数据，一张1M的png，智图压缩后是138K，webp压缩后是207K，应该是这几年智图的压缩算法优化过了😊
