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

[garlics]

本来是小图片都放在后端，然后前端通过 https 访问。这么用一直没啥问题，直到最近发现 cdn 开始对 https 访问次数收费，我每天不到 4 千的 uv ，半个月就干了 200w 请求，直接就把月免费额度干完了。

目前就想到两个方法减少图片的 https 请求，一个是直接在接口返回 base64 ，一个是雪碧图。我网站的图片基本都不变化，使用 base64 的话，就无法使用浏览器的缓存，用户体验会变差。使用雪碧图的话，我刚看了下，目前有 600 多个小图片，但是每次网页只展示 40~60 个，虽然展示的有点规律，但是不多。一次生成 600 多个图片的雪碧图，文件过大，体验也不太好。如果是后端根据前端请求统一图片生成雪碧图并返回相应 css 给前端似乎能解决相关的痛点，不过实现起来有点麻烦，如果没有更好的方案估计会选用这么做。

[docx]

对象存储，用另一家服务商

[ktqFDx9m2Bvfq3y4]

如果能上 cf 就没有这个问题了

[netnr]

使用 Service Worker 缓存图片或整站

[garlics]

@docx 使用对象储存还是需要用 cdn 进行访问吧，刚看了下七牛的免费额度只适用于 http 请求，而要换服务商的话肯定也是等现在服务商的流量用完再说。

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


@netnr 我这个场景网页是一天一变，缓存整站意义不大。缓存图片的话，我配置了 http 的缓存规则，应该不用额外处理也是默认缓存的吧，不过我倒是没详细测试过缓存生效没有。

[Hansah]

又拍云有 https 的免费额度

[xiangyuecn]

不要在意这几毛钱

[weiwoxinyou]

按请求次数收费而不是流量收费可还行。

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

用户屏幕 40-60 个的图片按 1920*1080 的分辨率计算可知单个图片差不多 200*200 像素，这时候按 40-60 个图片拼一张图可以控制单个图片不大，而流量降低 40 倍，再配合浏览器缓存，感觉这个更适合你的需求。

[tool2d]

开 http2 协议。

你访问 bbs.3dmgame.com ，从 network 面板上也能看到有 300 多个小图片，但是只用了一个 HTTPS 2 的 TCP 请求，全部图片都走新协议的 stream 多路复用技术。

[pansongya]

白嫖 马化腾的微信公众号

[paopjian]

统计一下使用频率,生成几个通用的雪碧图?又优化了大小也能优化请求次数

[luguokong]

base64 只影响首屏或者接口响应时长吧？还会浪费点流量

[aoewlittlebear]

svg ，写代码里都成

[asmoker]

多账号多云平台蹭免费额度

[tomcats]

Svg,base64 。还有个骚操作，把几张图片合成一个 gif ，然后前端把每一帧图片解析出来

[zackzergzeng]

不都是把小图标合并到一个图上，然后裁剪使用吗？这个应该有 webpack 插件支持

[GG668v26Fd55CP5W]

1. 减少请求次数，2. 浏览器缓存
好像只能雪碧图了。

[boneyao]

@netnr 有没有对应的框架

[woshinide300yuan]

我是从阿里云转到了 ucloud ，又从 ucloud 转到了阿里云 HK 轻量上。 可惜了 ucloud 买的 50T 了，用了 8T 就跑路了。还好之前买的早，是无时间限制的套餐，现在都有时间限制了。 这么折腾是为啥呢，也是……为了省掉回源+HTTPS 计费+get 计费，哈哈哈……

[DKburNIng]

既然是小图，那 base64 也慢不了啥吧

[ethsol]

华为云 cdn 不收 https 请求费

[whileFalse]

@tomcats 还不如雪碧图…

[netnr]

@garlics @boneyao
webpack 集成 https://www.npmjs.com/package/workbox-webpack-plugin ，然后配置缓存规则（只针对图片）
可以问 ChatGPT：workbox-webpack-plugin 仅缓存图片