web 图片压缩比例有没有最佳实践

[everyx]

适用 PageSpeed Insights 测试网站，提示“适当调整图片大小”，这里的压缩比有什么最佳实践么？

比如：webp: 100K 以上压缩比例 70%，100K 一下 60% 之类的？

找到两篇文章：

1. Best practices for optimizing the quality of your images
2. AVIF and WebP encoding quality settings

[rekulas]

不清楚别人怎么做的，我自己做图片都习惯 ps 直接存储为 web 所用格式，要求清晰点就选高质量，普通要求就中等，基本就是达到体积与清晰度的最佳选择了，接触的很多美工都不清楚怎么保存出又清晰又小的图片，经常需要我去提醒对方

[everyx]

@rekulas 是的，如果是人工处理，可以看图片质量的损失程度来自己决定压缩质量，但是我们图片是程序批量处理的，图片宽高尺寸的问题好解决，只是压缩比例这里，不知道确定多少对所有情况都比较合适。

[ericls]

@everyx 一般是压缩几个不同尺寸和大小的让浏览器自己选择

[everyx]

@ericls 嗯嗯，尺寸的响应式处理已经适配了，目前是图片压缩质量这块，不知道如何确定压缩质量的参数比价合适。扒了一下 Lighthouse 的源码，也没有写这个值，只是根据理论压缩率来比较的

https://github.com/GoogleChrome/lighthouse/blob/c1de7aca060c1f13a82b657780f6a55f0507d9fa/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js#L52-L64

[ericls]

@everyx 这个感觉有点奇怪 还真是很纯粹的理论值…… 不知道那些做 image hosting 的怎么处理的

[xiaoming1992]

就我自己的实践，jpg png 90-92% 质量和尺寸都挺好了

[xiaoming1992]

84% 以下质量就损失比较大了，尺寸也没有较大的降低

[everyx]

@xiaoming1992 👍🏻 刚刚 append 了两篇资料，Adobe 也是讲要保障图片质量，JPG 要在 90-95%，追求文件大小，尺寸在 80% 左右，低于 75% 图片质量将严重下降，不建议，可以作为参考

[akira]

图片显示多少，就调整为多大的 就行了。你上来就一堆几十兆的图片，谁也扛不住啊

[everyx]

@akira 这些都已经做了，这里讨论的是如何设置图片的压缩质量比较合理和通用

[akira]

@everyx 那就是你图片都没压缩过的吧。 随便选款压缩软件压一下就好。
图片少我一般直接用 tinypng 处理一下就可以了。

[3dwelcome]

我知道有个游戏压缩图片是打分制，反复多压缩几次，每次计算压缩后和原图计算误差累计值，如果误差在程序设定范围内，就继续加大压缩率，反之就减少压缩率。

在循环 10 次后，最终压缩比，都会趋近于一个极值，并且每张图片压缩率都是自适应。

[everyx]

@akira 图片是已经压缩了的，大概 1600 宽 1000 高，quality 80 的 webp 图片

[everyx]

@3dwelcome 这个如果用来做在线转换服务，延迟肯定接受不了 😂

[noobma]

jpeg 的图片，我是用 mozjpeg 做压缩以及转换成渐进式 jpeg，质量设置的 80，图片都是手机拍摄的，我测试了几十张图片，原图基本上都是 2M 以上甚至 4M 多，压缩后基本上 800K 以内，2 张图片放大后对比没有看出有损失清晰度😂

[everyx]

@noobma 可以看看我 append 的链接内容，有程序化的比较方法 😁

[qwerthhusn]

https://squoosh.app/

找个图片进去，试一下用不同的编码，不同的质量去看效果和压缩后的文件大小。

直接手动选择编码和拖动质量，一边对比一边看效果一边看文件大小

[no1xsyzy]

@3dwelcome 那估计牛顿法 2 iteration 就可以趋近了（

[everyx]

@qwerthhusn 嗯嗯，这个是人工判断的，而我需要的只是一个简单的各图片格式下平衡文件大小和显示效果的经验值

[libook]

看需求吧，加载时间、消耗流量、精细度，可以迭代着来。

有的 CDN 支持动态压缩和裁剪，上传原画质量文件，只需要在请求资源的时候带上相应的 querystring 或者 header 就可以。