V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
garlics
V2EX  ›  问与答

2023 了,网站有大量小图片应该怎么处理?

  •  
  •   garlics · 2023-03-15 09:04:28 +08:00 · 2663 次点击
    这是一个创建于 379 天前的主题,其中的信息可能已经有所发展或是发生改变。
    本来是小图片都放在后端,然后前端通过 https 访问。这么用一直没啥问题,直到最近发现 cdn 开始对 https 访问次数收费,我每天不到 4 千的 uv ,半个月就干了 200w 请求,直接就把月免费额度干完了。

    目前就想到两个方法减少图片的 https 请求,一个是直接在接口返回 base64 ,一个是雪碧图。我网站的图片基本都不变化,使用 base64 的话,就无法使用浏览器的缓存,用户体验会变差。使用雪碧图的话,我刚看了下,目前有 600 多个小图片,但是每次网页只展示 40~60 个,虽然展示的有点规律,但是不多。一次生成 600 多个图片的雪碧图,文件过大,体验也不太好。如果是后端根据前端请求统一图片生成雪碧图并返回相应 css 给前端似乎能解决相关的痛点,不过实现起来有点麻烦,如果没有更好的方案估计会选用这么做。
    22 条回复    2023-03-16 09:25:33 +08:00
    docx
        1
    docx  
       2023-03-15 09:05:48 +08:00 via iPhone
    对象存储,用另一家服务商
    Chad0000
        2
    Chad0000  
       2023-03-15 09:09:11 +08:00 via iPhone
    如果能上 cf 就没有这个问题了
    netnr
        3
    netnr  
       2023-03-15 09:09:30 +08:00
    使用 Service Worker 缓存图片或整站
    garlics
        4
    garlics  
    OP
       2023-03-15 09:17:58 +08:00
    @docx 使用对象储存还是需要用 cdn 进行访问吧,刚看了下七牛的免费额度只适用于 http 请求,而要换服务商的话肯定也是等现在服务商的流量用完再说。

    @Chad0000 因为面向的是国内用户,所以就没上 cf 。


    @netnr 我这个场景网页是一天一变,缓存整站意义不大。缓存图片的话,我配置了 http 的缓存规则,应该不用额外处理也是默认缓存的吧,不过我倒是没详细测试过缓存生效没有。
    siknet
        5
    siknet  
       2023-03-15 10:11:33 +08:00
    又拍云有 https 的免费额度
    xiangyuecn
        6
    xiangyuecn  
       2023-03-15 10:23:01 +08:00
    不要在意这几毛钱
    weiwoxinyou
        7
    weiwoxinyou  
       2023-03-15 10:25:45 +08:00
    按请求次数收费而不是流量收费可还行。

    第一眼以为 http2.0 解决,第二眼发现可能雪碧图更合适一点。

    用户屏幕 40-60 个的图片按 1920*1080 的分辨率计算可知单个图片差不多 200*200 像素,这时候按 40-60 个图片拼一张图可以控制单个图片不大,而流量降低 40 倍,再配合浏览器缓存,感觉这个更适合你的需求。
    tool2d
        8
    tool2d  
       2023-03-15 10:26:03 +08:00
    开 http2 协议。

    你访问 bbs.3dmgame.com ,从 network 面板上也能看到有 300 多个小图片,但是只用了一个 HTTPS 2 的 TCP 请求,全部图片都走新协议的 stream 多路复用技术。
    pansongya
        9
    pansongya  
       2023-03-15 10:27:11 +08:00
    白嫖 马化腾的微信公众号
    paopjian
        10
    paopjian  
       2023-03-15 10:32:21 +08:00
    统计一下使用频率,生成几个通用的雪碧图?又优化了大小也能优化请求次数
    luguokong
        11
    luguokong  
       2023-03-15 10:43:04 +08:00 via Android
    base64 只影响首屏或者接口响应时长吧?还会浪费点流量
    aoewlittlebear
        12
    aoewlittlebear  
       2023-03-15 10:51:56 +08:00
    svg ,写代码里都成
    asmoker
        13
    asmoker  
       2023-03-15 10:56:10 +08:00 via Android
    多账号多云平台蹭免费额度
    tomcats
        14
    tomcats  
       2023-03-15 11:15:02 +08:00 via iPhone   ❤️ 1
    Svg,base64 。还有个骚操作,把几张图片合成一个 gif ,然后前端把每一帧图片解析出来
    zackzergzeng
        15
    zackzergzeng  
       2023-03-15 12:00:15 +08:00
    不都是把小图标合并到一个图上,然后裁剪使用吗?这个应该有 webpack 插件支持
    falcon05
        16
    falcon05  
       2023-03-15 12:03:38 +08:00
    1. 减少请求次数,2. 浏览器缓存
    好像只能雪碧图了。
    boneyao
        17
    boneyao  
       2023-03-15 12:17:40 +08:00
    @netnr 有没有对应的框架
    woshinide300yuan
        18
    woshinide300yuan  
       2023-03-15 13:09:36 +08:00
    我是从阿里云转到了 ucloud ,又从 ucloud 转到了阿里云 HK 轻量上。 可惜了 ucloud 买的 50T 了,用了 8T 就跑路了。还好之前买的早,是无时间限制的套餐,现在都有时间限制了。 这么折腾是为啥呢,也是……为了省掉回源+HTTPS 计费+get 计费,哈哈哈……
    DKburNIng
        19
    DKburNIng  
       2023-03-15 18:31:35 +08:00
    既然是小图,那 base64 也慢不了啥吧
    zong400
        20
    zong400  
       2023-03-15 18:33:13 +08:00
    华为云 cdn 不收 https 请求费
    whileFalse
        21
    whileFalse  
       2023-03-15 23:34:50 +08:00 via iPhone
    @tomcats 还不如雪碧图…
    netnr
        22
    netnr  
       2023-03-16 09:25:33 +08:00
    @garlics @boneyao
    webpack 集成 https://www.npmjs.com/package/workbox-webpack-plugin ,然后配置缓存规则(只针对图片)
    可以问 ChatGPT:workbox-webpack-plugin 仅缓存图片
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3472 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 47ms · UTC 10:57 · PVG 18:57 · LAX 03:57 · JFK 06:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.