关于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图片技术调研最终结论(完全真实数据可自行分析)的更多相关文章

  1. webp图片详解

    WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使 ...

  2. 关于webp图片格式初探

    前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了一个有价值 ...

  3. 图片流量节省大杀器:基于CDN的sharpP自适应图片技术实践

    版权声明:本文由陈忱原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/156 来源:腾云阁 https://www.qclou ...

  4. 网站页面优化必然趋势—WebP 图片!

    本文梗概:众所周知,浏览器可以通过 HTTP 请求的 Accpet 属性 来指定接收的内容类型.依靠这个技术,可以在不修改任何 HTML/CSS 或者图片的情况下,向浏览器提供优化的图片,从而降低带宽 ...

  5. 提升网站用户体验—WebP 图片的高效使用

    一.WebP 的由来 现代图像压缩技术对我们的生活方式影响很大.数码相机能将上千张高质量图片存储到一张内存卡里.智能手机可以与邻近设备快速分享高分辨率的图片.网站与手机等移动设备能快速展示各种富媒体. ...

  6. 图片流量节省大杀器:基于腾讯云CDN的sharpP自适应图片技术实践

    目前移动端运营素材大部分依赖图片,基于对图片流量更少,渲染速度更快的诉求,我们推动CDN,X5内核,即通产品部共同推出了一套业务透明,无痛接入的CDN图片优化方案:基于CDN的sharpP自适应图片无 ...

  7. WebP图片格式

    腾讯科技讯 科技博客Gig‍‍‍aOM近日撰文称,谷歌(微博)试图让WebP图片格式取代JPEG等现有图片格式.虽然谷歌无法很快达成所愿,但WebP仍然会对互联网产生重大影响. 文章全文如下: 受够了 ...

  8. Android Bitmap转换WebP图片导致损坏的分析及解决方案

    背景 作为移动领域所力推的图片格式,WebP图片在商业领域证明了其应有的价值.基于其他格式的横向对比,其在压缩性能表现,及还原度极为优秀,节省大量的带宽开销.基于可观的效益比,团队早前已开始磋商将当前 ...

  9. webp图片实践之路

    最近,我们在项目中实践了webp图片,并且抽离出了工具模块,整合到了项目的基础模板中.传闻IOS10也将要支持webp,那么使用webp带来的性能提升将更加明显.估计在不久的将来,webp会成为标配. ...

随机推荐

  1. Spring Boot 整合 rabbitmq

    一.消息中间件的应用场景 异步处理 场景:用户注册,信息写入数据库后,需要给用户发送注册成功的邮件,再发送注册成功的邮件. 1.同步调用:注册成功后,顺序执行发送邮件方法,发送短信方法,最后响应用户 ...

  2. Django 无名参数与有名参数

    无名参数 配置 urls ,我们需要导入 url 模块,以()定义一个无名的变量 from django.contrib import admin from django.urls import pa ...

  3. 从零开始搭建服务器部署web项目

    前言 该教程旨在完整描述建站过程,会将博主踩过的坑尽量详细的罗列出来.整个建站流程相对较为庞大,因此做了分解,同时适合大家有针对性的查询感兴趣的部分. 一.如何拥有自己的云服务器. 二.域名的购买与解 ...

  4. (详细)华为Mate7 MT7-TL00的usb调试模式在哪里开启的步骤

    就在我们使用pc连接安卓手机的时候,如果手机没有开启usb调试模式,pc则不能够成功识别我们的手机,在一些情况下,我们使用的一些功能较好的工具好比之前我们使用的一个工具引号精灵,老版本就需要打开usb ...

  5. Android View的重绘过程之Layout

    博客首页:http://www.cnblogs.com/kezhuang/p/ View绘制的三部曲,测量,布局,绘画现在我们分析布局部分测量部分在上篇文章中已经分析过了.不了解的可以去我的博客里找一 ...

  6. 【English】十五、“a”和“one”的区别是什么?

    一."a"和"one"的区别是什么 参考:“a”和“one”的区别是什么-百度知道 a和one的区别是什么?-作业帮 1.尽管a和one这两个在意义上有些相似, ...

  7. 使用免费 mongodb数据库 + 免费node.js服务器搭建小程序接口

    由于微信的小程序只支持不带端口的域名接口,不支持IP地址和接口,所以我们需要映射到80端口并绑定备案过的域名才能被微信小程序访问到.简单点就是接口需要 https 协议才行,找了许久的免费的数据库与n ...

  8. MyDAL - .IsExistAsync() 使用

    索引: 目录索引 一.API 列表 .IsExistAsync() 用于 单表 / 多表连接 查询 二.API 单表-便捷 方法 举例 1.单表-便捷, 判断是否存在方法 var date = Dat ...

  9. Tableau环图可视化

    1.选择"记录数",拖拽两个记录数放入列中,求总和,选择饼图: 2.选择"大小",调整两个饼图的大小: 3.点击第二个总和(行上的),选择“双轴”: 4.点击坐 ...

  10. 怎樣添加設置GridView,CheckBox全選功能

    GridView內CheckBox控件全選設置 不需要添加後台代碼操作,前端即可完成設置,如下: 前端代碼: 1.設置javascript. <html xmlns="http://w ...