webp图片技术调研最终结论(彻底真实数据可自行分析)
关于webp图片格式调研及测试
资料收集html
- 什么是 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/）等。git
- WebP 的优点
上面只是简单介绍了这种图片格式的背景和应用，不过 “talk is cheap”，这种格式优点在哪里？除了压缩效果极好，图片质量可否获得保障？这须要更理性客观的数据：github
这里列举一个简单的测试：对比 PNG 原图、PNG 无损压缩、PNG 转 WebP（无损）、PNG 转 WebP（有损）的压缩效果。更多测试查看 https://isparta.github.io （请用 Chrome 浏览器打开）web
- 有损 WebP VS JPG
当 WebP 将 JPG 压缩到至关于原图 90% 质量 时，图片体积减小了 50% 左右。当 WebP 将 JPG 压缩到至关于原图 80% 质量时，图片体积则减小了 60%~80%。 有损 WebP 压缩性能优于 JPG 的缘由主要是其预测编码技术先进，而且宏块自适应量化也带来了压缩效率的提高，而布尔算术编码与霍夫曼编码相比提高了 5%~10% 的压缩性能。
- 无损 WebP 对比 PNG
- 与主流图片对别
实际测试浏览器
- 使用Python的PIL库测试(须要最新版本6.0支持webp格式)
-
参数说明
im.save(filename + “.webp”, “WEBP”,quality=quality)markdown -
文件大小小于1Mapp
| 图片名 | 原始大小(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% |
- 使用libwebp
- time cwebp -lossless -q 100 filename -o filename.webp
-
压缩参数说明：less
-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加载速度性能测试
- 1. MySQL数据库分片技术调研
- 2. hihocoder week170分析---最大子彻底图
- 3. Android埋点技术分析调研
- 4. WebP 图片实践之路
- 5. webp图片实践之路
- 6. 技术人最不应忽视可视化数据分析！
- 7. 【技术调研】WebP格式在Android平台上的应用
- 8. 回溯、图论——最大团问题（求最大彻底子图）
- 9. 技术调研
- 10. 图分析引擎技术方案调研
- 更多相关文章...
- • XML 相关技术 - XML 教程
- • 数据库涉及到哪些技术？ - MySQL教程
- • 三篇文章了解 TiDB 技术内幕 —— 谈调度
- • Flink 数据传输及反压详解
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. MySQL数据库分片技术调研
- 2. hihocoder week170分析---最大子彻底图
- 3. Android埋点技术分析调研
- 4. WebP 图片实践之路
- 5. webp图片实践之路
- 6. 技术人最不应忽视可视化数据分析！
- 7. 【技术调研】WebP格式在Android平台上的应用
- 8. 回溯、图论——最大团问题（求最大彻底子图）
- 9. 技术调研
- 10. 图分析引擎技术方案调研