适用 PageSpeed Insights 测试网站,提示“适当调整图片大小”,这里的压缩比有什么最佳实践么?
比如:webp: 100K 以上压缩比例 70%,100K 一下 60% 之类的?
1
rekulas 2021-06-08 21:58:06 +08:00
不清楚别人怎么做的,我自己做图片都习惯 ps 直接存储为 web 所用格式,要求清晰点就选高质量,普通要求就中等,基本就是达到体积与清晰度的最佳选择了,接触的很多美工都不清楚怎么保存出又清晰又小的图片,经常需要我去提醒对方
|
2
everyx OP @rekulas 是的,如果是人工处理,可以看图片质量的损失程度来自己决定压缩质量,但是我们图片是程序批量处理的,图片宽高尺寸的问题好解决,只是压缩比例这里,不知道确定多少对所有情况都比较合适。
|
4
everyx OP @ericls 嗯嗯,尺寸的响应式处理已经适配了,目前是图片压缩质量这块,不知道如何确定压缩质量的参数比价合适。扒了一下 Lighthouse 的源码,也没有写这个值,只是根据理论压缩率来比较的
https://github.com/GoogleChrome/lighthouse/blob/c1de7aca060c1f13a82b657780f6a55f0507d9fa/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js#L52-L64 |
5
ericls 2021-06-08 23:09:06 +08:00 via iPhone
@everyx 这个感觉有点奇怪 还真是很纯粹的理论值…… 不知道那些做 image hosting 的怎么处理的
|
6
xiaoming1992 2021-06-08 23:21:20 +08:00 via Android 1
就我自己的实践,jpg png 90-92% 质量和尺寸都挺好了
|
7
xiaoming1992 2021-06-08 23:22:27 +08:00 via Android
84% 以下质量就损失比较大了,尺寸也没有较大的降低
|
8
everyx OP @xiaoming1992 👍🏻 刚刚 append 了两篇资料,Adobe 也是讲要保障图片质量,JPG 要在 90-95%,追求文件大小,尺寸在 80% 左右,低于 75% 图片质量将严重下降,不建议,可以作为参考
|
9
akira 2021-06-08 23:41:01 +08:00
图片显示多少,就调整为多大的 就行了。你上来就一堆几十兆的图片,谁也扛不住啊
|
11
akira 2021-06-08 23:45:43 +08:00
@everyx 那就是你图片都没压缩过的吧。 随便选款压缩软件压一下就好。
图片少我一般直接用 tinypng 处理一下就可以了。 |
12
3dwelcome 2021-06-08 23:53:40 +08:00
我知道有个游戏压缩图片是打分制,反复多压缩几次,每次计算压缩后和原图计算误差累计值,如果误差在程序设定范围内,就继续加大压缩率,反之就减少压缩率。
在循环 10 次后,最终压缩比,都会趋近于一个极值,并且每张图片压缩率都是自适应。 |
13
everyx OP @akira 图片是已经压缩了的,大概 1600 宽 1000 高,quality 80 的 webp 图片
|
15
noobma 2021-06-09 07:40:01 +08:00
jpeg 的图片,我是用 mozjpeg 做压缩以及转换成渐进式 jpeg,质量设置的 80,图片都是手机拍摄的,我测试了几十张图片,原图基本上都是 2M 以上甚至 4M 多,压缩后基本上 800K 以内,2 张图片放大后对比没有看出有损失清晰度😂
|
17
qwerthhusn 2021-06-09 09:57:35 +08:00
|
19
everyx OP @qwerthhusn 嗯嗯,这个是人工判断的,而我需要的只是一个简单的各图片格式下平衡文件大小和显示效果的经验值
|
20
libook 2021-06-09 11:59:08 +08:00
看需求吧,加载时间、消耗流量、精细度,可以迭代着来。
有的 CDN 支持动态压缩和裁剪,上传原画质量文件,只需要在请求资源的时候带上相应的 querystring 或者 header 就可以。 |