跳到主要内容

无损 WebP 正确的使用姿势

l

lingsen.zeng

https://blog.upyun.com/?p=1595

2020年08月08日 2,364 次阅读
本页目录

有损 WebP 会损失图片的内容,降低图片质量,对图片质量要求高的应用会考虑使用无损 WebP,在减少图片体积的同时保证使用体验。相关阅读:WebP 开发专题。
 

使用无损 WebP,主要涉及三个问题:

一是质量(quality)与体积的关系,当 q 设置多大时图片体积是最优的。

二是其他图片格式转换成无损 WebP 时体积变化的关系,什么格式适合转成无损 WebP。

三是转换后图片质量是否下降。
 

首先来看质量与体积的关系,有损 WebP 的体积随 q 的变大而变大,无损 WebP 不同,体积随 q 的变大而略微变小,在 q=100 时体积取得最优解。如下图所示:

质量与体积的关系

其次,其他图片格式转换成 WebP 时体积变化的关系,转成有损 WebP 体积平均减少 70%,转成无损 WebP 体积变化跟图片格式相关。

JPG 转换成无损 WebP,体积平均增大了 1.5 倍。如果 JPG 的体积是 100KB,转成无损 WebP 后体积约是 250KB。

JPG 转 WebP

PNG 转换成无损 WebP,体积平均减少了 35%。如果 PNG 的体积是 100KB,转成无损 WebP 后体积约是 65KB。

PNG 转 WebP

BMP 转换成无损 WebP,体积平均减少了 38%。如果 PNG 的体积是 100KB,转成无损 WebP 后体积约是 62KB。

BMP 转无损 WebP

SVG 转换成无损WebP, 体积平均减少 7%。经过分析,SVG 是基于 XML 格式的二维矢量图形格式,在传输时通常会被 HTTP 服务端压缩(比如 gzip),这减少了一部分大小,所以转换成无损 WebP 时体积减少较小。用几张原生 SVG 转换测验,体积减少超 50%。

SVG 转无损 WebP

 

最后,转换后图片质量是否下降,转成有损 WebP 肉眼可以感觉到差别,转成无损 WebP 肉眼难以感觉到差别。
 

总结,无损图片格式(PNG、SVG、BMP)转成无损 WebP,在保证图片质量的同时能显著减少图片体积,且 q = 100 时,体积达到最佳值。有损图片格式 JPG 转成无损 WebP 体积平均增大 150%。

 

说明:测验的图片数据集随机获取自互联网,数值采用平均值计算方法,结论相对客观、公正。

Related

相关文章

同分类文章 →
2025年06月10日 前端

gemini-2.5-pro-0605 按图生成html效果测试

Gemini 最新推出的 2.5 版本真的有点东西。之前用过不少 AI 辅助写代码的工具,但这次它的“图生 HTML”功能确实让我眼前一亮——上传一张设计图,它不仅能快速识别布局和元素,还能生成结构清晰、样

2025年03月14日 前端

css flex-1和overflow-hidden结合使用详解:弹性布局与内容溢出控制

在 Flexbox 布局中,flex: 1 和 overflow: hidden 是两个常用的属性,它们组合使用可以有效地控制子元素的尺寸和内容显示。flex: 1 的作用:当子元素设置 flex: 1 时,它会根据 Flex 容器的主轴方向,自动伸缩以填充剩余的可用

2025年03月13日 前端

Vue 3中实现处理后的v-model双向绑定

在Vue 3中,当你需要对v-model传入的值进行处理后再展示或使用时,可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。 实现步骤 接收父组件传递的v-model值 创建计算属性,在getter中处理展示值,在setter中处

WeChat

扫码加我微信

微信二维码