webp图片技术调研最终结论(完全真实数据可自行分析)

关于webp图片格式调研及测试

资料收集

• 什么是 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 的图片格式转换工具，如智图（http://zhitu.tencent.com），iSparta（http://isparta.github.io/）等。

• WebP 的优势

上面只是简单介绍了这种图片格式的背景和应用，不过 “talk is cheap”，这种格式优势在哪里？除了压缩效果极好，图片质量能否得到保障？这需要更理性客观的数据：

这里列举一个简单的测试：对比 PNG 原图、PNG 无损压缩、PNG 转 WebP（无损）、PNG 转 WebP（有损）的压缩效果。更多测试查看 https://isparta.github.io （请用 Chrome 浏览器打开）

• 有损 WebP VS JPG

当 WebP 将 JPG 压缩到相当于原图 90% 质量 时，图片体积减少了 50% 左右。当 WebP 将 JPG 压缩到相当于原图 80% 质量时，图片体积则减少了 60%~80%。





有损 WebP 压缩性能优于 JPG 的原因主要是其预测编码技术先进，并且宏块自适应量化也带来了压缩效率的提升，而布尔算术编码与霍夫曼编码相比提升了 5%~10% 的压缩性能。

• 无损 WebP 对比 PNG

• 与主流图片对别

实际测试

1. 使用Python的PIL库测试(需要最新版本6.0支持webp格式)

• 参数说明
  im.save(filename + “.webp”, “WEBP”,quality=quality)

• 文件大小小于1M

图片名	原始大小(k)	质量100(转换后大小k:消耗时间ms:压缩率)	质量75(转换后大小k:消耗时间ms:压缩率)
1.jpg	99.57	93.75 : 167.89 : 5.85%	21.2 : 53.97 : 78.71%
10.jpg	34.11	53.72 : 32.98 : -57.49%	14.22 : 23.98 : 58.31%
100.jpg	22.88	34.61 : 28.98 : -51.27%	8.31 : 21.99 : 63.68%
101.jpg	26.57	41.72 : 30.98 : -57.02%	9.48 : 23.98 : 64.32%
102.jpg	18.67	27.0 : 25.99 : -44.62%	5.78 : 19.99 : 69.04%
103.jpg	110.72	110.11: 74.95 : 0.55%	26.27 : 54.97 : 76.27%
104.jpg	179.54	47.26 : 30.98 : 73.68%	10.8 : 22.99 : 93.98%
105.jpg	32.43	50.91 : 31.98 : -56.98%	13.47 : 23.99 : 58.46%
106.jpg	31.81	52.32 : 32.98 : -64.48%	12.48 : 29.98 : 60.77%
107.jpg	66.18	144.21: 83.95 : -117.91%	35.42 : 62.96 : 46.48%
108.jpg	32.6	61.65 : 79.96 : -89.11%	12.31 : 50.96 : 62.24%

• 文件大于1M

图片名	原始大小(k)	质量100(转换后大小k: 消耗时间ms:压缩率)	质量75(转换后大小k: 消耗时间ms :压缩率)
17.jpeg	931.15	939.24 : 2178.65 : -0.87%	306.95 : 5579.53 : 67.04%
1.jpeg	2620.27	3258.7 : 3557.79 : -24.37%	984.66 : 6579.91 : 62.42%
16.jpeg	1657.2	687.56 : 6576.91 : 58.51%	143.93 : 4463.23 : 91.31%
14.jpeg	4386.87	2677.85 : 4474.22 : 38.96%	466.51 : 10093.73 : 89.37%
13.jpeg	3068.32	4566.25 : 6616.89 : -48.82%	996.69 : 13679.5 : 67.52%
12.jpeg	1061.62	1346.44 : 9029.39 : -26.83%	353.87 : 15291.46 : 66.67%
18.jpeg	1121.79	1280.48 : 12631.14 : -14.15%	112.97 : 7239.41 : 89.93%
19.jpeg	848.29	1344.75 : 14135.18 : -58.52%	353.47 : 5392.59 : 58.33%
100.jpeg	9446.42	2697.1 : 16651.65 : 71.45%	313.62 : 21351.52 : 96.68%
11.jpg	5780.23	2102.63 : 20296.39 : 63.62%	236.71 : 16375.65 : 95.9%
15.jpeg	5231.54	1843.42 : 18833.29 : 64.76%	154.02 : 21408.48 : 97.06%

1. 使用libwebp

• time cwebp -lossless -q 100 filename -o filename.webp

• 压缩参数说明：

  -lossless：无损压缩
  -q：压缩质量，值越大越图片质量越好
  -m：压缩方式，值越大则图片质量越好，体积越小，但是耗时较长

  可以发现，无损压缩表现很稳定，压缩质量越高，压缩效果也越好。而有损压缩在压缩质量设置为 75 以上之后，压缩效果反而减弱，甚至压缩后的图片体积会大于压缩前的体积。

图片名	原大小	无损100（大小:消耗时间s)	有损100(大小:消耗时间s)	有损75(大小:消耗时间s)
1.jpg	117k	435K:1.50s	177K:0.27s	48K:0.20s
2.jpg	272k	1.6M:3.21s	680K:0.90s	259K:0.75s
3.jpg	300k	938K:4.50s	448K:0.81s	113k:0.75s
4.jpg	576k	753K:1.94s	296K:0.49s	67K:0.38s
5.jpg	805k	3.2M:9.88s	1.2M:1.52s	274K:1.12s
6.jpg	1.4M	5.5M:9.04s	2.3M:1.70s	551K:1.49s
01.jpg	119K	338K:1.55s	119K:0.25s	28K:0.19s
02.jpg	207K	486K:2.22s	229K:0.35s	76K:0.24s
03.jpg	305K	1.4M:3.58s	653K:0.87s	225K:0.87s
04.jpg	477K	2.5M:4.84s	1000K:0.59s	307K:0.85s
05.jpeg	617K	740K:3.31s	418K:0.82ss	54K:0.79s
06.jpeg	932K	2.4M:4.82s	940K:1.13s	307K:0.99s

• jpg 压缩

• time -p convert -quality 100 filename.jpg filename.jpg

• 压缩参数说明：

  -quality: 图片压缩质量

图片名	原大小	quality=100(大小:消耗时间s)	quality=75(大小:消耗时间s)
1.jpg	117k	227K:0.14s	63K:0.04s
2.jpg	272k	694K:0.16s	297K:0.13s
3.jpg	300k	744K:0.23s	262K:0.2s
4.jpg	576k	544K:0.13s	107K:0.09s
5.jpg	805k	1.8M:0.21s	430K:0.36s
6.jpg	1.4M	2.7M:0.57s	720K:0.42s
01.jpg	119K	188K:0.05s	50K:0.04s
02.jpg	207K	288K:0.07s	93K:0.05s
03.jpg	305K	734K:0.20s	307K:0.17s
04.jpg	477K	1.2M:0.24s	450K:0.20s
05.jpeg	617K	707K:0.24s	151K:0.19s
06.jpeg	932K	1.6M:0.32s	477K:0.24s

最终的结论：

选择无损压缩时，“-lossless -q 100” 是最佳方案,注意:cwebp 仅仅对png格式的图片使用无损压缩时，会有较为高效的压缩率和图片质量

选择有损压缩时，“-q 75”是最佳方案（图片质量与体积大小达到均衡）建议其他格式图片使用有损压缩

无论何种压缩参数，加上“-m 6”都能使得输出的 WebP 图片进一步减少体积，量级是1%~2%，但是会增加耗时

非png格式的图片选择无损压缩时，“-lossless -q 100” 时编码时间长，图片质量反而极高可能变大，编码时间时间很长，cpu使用率飙升跑满，不建议使用

建议选择有损压缩时，“-q 75”是最佳方案（图片质量与体积大小达到均衡）建议使用

webp 和jpg 同比例压缩对比可知

即使jpg图片同比例压缩为jpg和webp图片 webp图片也要比jpg图片质量低百分之10~20之间

参考的实时转换的网站和参考文章

• 实时转换webp图片格式website

  • https://squoosh.app/editor 支持多种格式，支持无损压缩，自定义参数
  • http://isparta.github.io/ 仅支持png apng webp互转
  • https://www.upyun.com/webp 又拍云 压缩方式应该使用的是有损压缩，

• 参考文章

  • https://cloud.tencent.com/developer/article/1151876 webp的应用分析
  • https://www.cnblogs.com/xiaozz/p/6450178.html 该文章对于webp的兼容性，编码效率，cpu使用情况等进行了详细分析
  • http://www.cnblogs.com/yjken/p/3922299.html 前端支持webp的方式
  • http://www.cnblogs.com/season-huang/p/5804884.html 支持webp的实践方案
  • http://www.cnblogs.com/Pickcle/p/6247740.html webp加载速度性能测试

​