V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
everyx
V2EX  ›  Web Dev

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

  •  
  •   everyx · 2021-06-08 21:44:06 +08:00 · 3405 次点击
    这是一个创建于 1271 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    比如:webp: 100K 以上压缩比例 70%,100K 一下 60% 之类的?

    image

    第 1 条附言  ·  2021-06-08 23:30:07 +08:00
    20 条回复    2021-06-09 11:59:08 +08:00
    rekulas
        1
    rekulas  
       2021-06-08 21:58:06 +08:00
    不清楚别人怎么做的,我自己做图片都习惯 ps 直接存储为 web 所用格式,要求清晰点就选高质量,普通要求就中等,基本就是达到体积与清晰度的最佳选择了,接触的很多美工都不清楚怎么保存出又清晰又小的图片,经常需要我去提醒对方
    everyx
        2
    everyx  
    OP
       2021-06-08 22:01:47 +08:00
    @rekulas 是的,如果是人工处理,可以看图片质量的损失程度来自己决定压缩质量,但是我们图片是程序批量处理的,图片宽高尺寸的问题好解决,只是压缩比例这里,不知道确定多少对所有情况都比较合适。
    ericls
        3
    ericls  
       2021-06-08 22:38:22 +08:00 via iPhone
    @everyx 一般是压缩几个不同尺寸和大小的让浏览器自己选择
    everyx
        4
    everyx  
    OP
       2021-06-08 22:50:52 +08:00
    @ericls 嗯嗯,尺寸的响应式处理已经适配了,目前是图片压缩质量这块,不知道如何确定压缩质量的参数比价合适。扒了一下 Lighthouse 的源码,也没有写这个值,只是根据理论压缩率来比较的

    https://github.com/GoogleChrome/lighthouse/blob/c1de7aca060c1f13a82b657780f6a55f0507d9fa/lighthouse-core/audits/byte-efficiency/uses-optimized-images.js#L52-L64
    ericls
        5
    ericls  
       2021-06-08 23:09:06 +08:00 via iPhone
    @everyx 这个感觉有点奇怪 还真是很纯粹的理论值…… 不知道那些做 image hosting 的怎么处理的
    xiaoming1992
        6
    xiaoming1992  
       2021-06-08 23:21:20 +08:00 via Android   ❤️ 1
    就我自己的实践,jpg png 90-92% 质量和尺寸都挺好了
    xiaoming1992
        7
    xiaoming1992  
       2021-06-08 23:22:27 +08:00 via Android
    84% 以下质量就损失比较大了,尺寸也没有较大的降低
    everyx
        8
    everyx  
    OP
       2021-06-08 23:40:25 +08:00 via Android   ❤️ 1
    @xiaoming1992 👍🏻 刚刚 append 了两篇资料,Adobe 也是讲要保障图片质量,JPG 要在 90-95%,追求文件大小,尺寸在 80% 左右,低于 75% 图片质量将严重下降,不建议,可以作为参考
    akira
        9
    akira  
       2021-06-08 23:41:01 +08:00
    图片显示多少,就调整为多大的 就行了。你上来就一堆几十兆的图片,谁也扛不住啊
    everyx
        10
    everyx  
    OP
       2021-06-08 23:42:24 +08:00 via Android
    @akira 这些都已经做了,这里讨论的是如何设置图片的压缩质量比较合理和通用
    akira
        11
    akira  
       2021-06-08 23:45:43 +08:00
    @everyx 那就是你图片都没压缩过的吧。 随便选款压缩软件压一下就好。
    图片少我一般直接用 tinypng 处理一下就可以了。
    3dwelcome
        12
    3dwelcome  
       2021-06-08 23:53:40 +08:00
    我知道有个游戏压缩图片是打分制,反复多压缩几次,每次计算压缩后和原图计算误差累计值,如果误差在程序设定范围内,就继续加大压缩率,反之就减少压缩率。

    在循环 10 次后,最终压缩比,都会趋近于一个极值,并且每张图片压缩率都是自适应。
    everyx
        13
    everyx  
    OP
       2021-06-08 23:58:30 +08:00 via Android
    @akira 图片是已经压缩了的,大概 1600 宽 1000 高,quality 80 的 webp 图片
    everyx
        14
    everyx  
    OP
       2021-06-08 23:59:33 +08:00 via Android
    @3dwelcome 这个如果用来做在线转换服务,延迟肯定接受不了 😂
    noobma
        15
    noobma  
       2021-06-09 07:40:01 +08:00
    jpeg 的图片,我是用 mozjpeg 做压缩以及转换成渐进式 jpeg,质量设置的 80,图片都是手机拍摄的,我测试了几十张图片,原图基本上都是 2M 以上甚至 4M 多,压缩后基本上 800K 以内,2 张图片放大后对比没有看出有损失清晰度😂
    everyx
        16
    everyx  
    OP
       2021-06-09 09:47:11 +08:00 via Android
    @noobma 可以看看我 append 的链接内容,有程序化的比较方法 😁
    qwerthhusn
        17
    qwerthhusn  
       2021-06-09 09:57:35 +08:00
    https://squoosh.app/

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

    直接手动选择编码和拖动质量,一边对比一边看效果一边看文件大小
    no1xsyzy
        18
    no1xsyzy  
       2021-06-09 10:04:10 +08:00
    @3dwelcome 那估计牛顿法 2 iteration 就可以趋近了(
    everyx
        19
    everyx  
    OP
       2021-06-09 10:58:41 +08:00
    @qwerthhusn 嗯嗯,这个是人工判断的,而我需要的只是一个简单的各图片格式下平衡文件大小和显示效果的经验值
    libook
        20
    libook  
       2021-06-09 11:59:08 +08:00
    看需求吧,加载时间、消耗流量、精细度,可以迭代着来。

    有的 CDN 支持动态压缩和裁剪,上传原画质量文件,只需要在请求资源的时候带上相应的 querystring 或者 header 就可以。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2582 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 10:41 · PVG 18:41 · LAX 02:41 · JFK 05:41
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.