这是一个创建于 618 天前的主题，其中的信息可能已经有所发展或是发生改变。
本来是小图片都放在后端，然后前端通过 https 访问。这么用一直没啥问题，直到最近发现 cdn 开始对 https 访问次数收费，我每天不到 4 千的 uv ，半个月就干了 200w 请求，直接就把月免费额度干完了。
目前就想到两个方法减少图片的 https 请求，一个是直接在接口返回 base64 ，一个是雪碧图。我网站的图片基本都不变化，使用 base64 的话，就无法使用浏览器的缓存，用户体验会变差。使用雪碧图的话，我刚看了下，目前有 600 多个小图片，但是每次网页只展示 40~60 个，虽然展示的有点规律，但是不多。一次生成 600 多个图片的雪碧图，文件过大，体验也不太好。如果是后端根据前端请求统一图片生成雪碧图并返回相应 css 给前端似乎能解决相关的痛点，不过实现起来有点麻烦，如果没有更好的方案估计会选用这么做。
目前就想到两个方法减少图片的 https 请求，一个是直接在接口返回 base64 ，一个是雪碧图。我网站的图片基本都不变化，使用 base64 的话，就无法使用浏览器的缓存，用户体验会变差。使用雪碧图的话，我刚看了下，目前有 600 多个小图片，但是每次网页只展示 40~60 个，虽然展示的有点规律，但是不多。一次生成 600 多个图片的雪碧图，文件过大，体验也不太好。如果是后端根据前端请求统一图片生成雪碧图并返回相应 css 给前端似乎能解决相关的痛点，不过实现起来有点麻烦，如果没有更好的方案估计会选用这么做。
 |
1
docx 2023-03-15 09:05:48 +08:00 via iPhone
对象存储，用另一家服务商
|
 |
2
Chad0000 2023-03-15 09:09:11 +08:00 via iPhone
如果能上 cf 就没有这个问题了
|
 |
3
netnr 2023-03-15 09:09:30 +08:00
使用 Service Worker 缓存图片或整站
|
 |
4
garlics OP |
 |
5
siknet 2023-03-15 10:11:33 +08:00
又拍云有 https 的免费额度
|
 |
6
xiangyuecn 2023-03-15 10:23:01 +08:00
不要在意这几毛钱
|
 |
7
weiwoxinyou 2023-03-15 10:25:45 +08:00
按请求次数收费而不是流量收费可还行。
第一眼以为 http2.0 解决，第二眼发现可能雪碧图更合适一点。 用户屏幕 40-60 个的图片按 1920*1080 的分辨率计算可知单个图片差不多 200*200 像素，这时候按 40-60 个图片拼一张图可以控制单个图片不大，而流量降低 40 倍，再配合浏览器缓存，感觉这个更适合你的需求。 |
 |
8
tool2d 2023-03-15 10:26:03 +08:00
开 http2 协议。
你访问 bbs.3dmgame.com ，从 network 面板上也能看到有 300 多个小图片，但是只用了一个 HTTPS 2 的 TCP 请求，全部图片都走新协议的 stream 多路复用技术。 |
 |
9
pansongya 2023-03-15 10:27:11 +08:00
白嫖 马化腾的微信公众号
|
 |
10
paopjian 2023-03-15 10:32:21 +08:00
统计一下使用频率,生成几个通用的雪碧图?又优化了大小也能优化请求次数
|
 |
11
luguokong 2023-03-15 10:43:04 +08:00 via Android
base64 只影响首屏或者接口响应时长吧？还会浪费点流量
|
 |
12
aoewlittlebear 2023-03-15 10:51:56 +08:00
svg ，写代码里都成
|
 |
13
asmoker 2023-03-15 10:56:10 +08:00 via Android
多账号多云平台蹭免费额度
|
 |
14
tomcats 2023-03-15 11:15:02 +08:00 via iPhone  1
Svg,base64 。还有个骚操作，把几张图片合成一个 gif ，然后前端把每一帧图片解析出来
|
 |
15
zackzergzeng 2023-03-15 12:00:15 +08:00
不都是把小图标合并到一个图上，然后裁剪使用吗？这个应该有 webpack 插件支持
|
 |
16
falcon05 2023-03-15 12:03:38 +08:00
1. 减少请求次数，2. 浏览器缓存
好像只能雪碧图了。 |
 |
18
woshinide300yuan 2023-03-15 13:09:36 +08:00
我是从阿里云转到了 ucloud ，又从 ucloud 转到了阿里云 HK 轻量上。 可惜了 ucloud 买的 50T 了，用了 8T 就跑路了。还好之前买的早，是无时间限制的套餐，现在都有时间限制了。 这么折腾是为啥呢，也是……为了省掉回源+HTTPS 计费+get 计费，哈哈哈……
|
 |
19
DKburNIng 2023-03-15 18:31:35 +08:00
既然是小图，那 base64 也慢不了啥吧
|
 |
20
zong400 2023-03-15 18:33:13 +08:00
华为云 cdn 不收 https 请求费
|
 |
21
whileFalse 2023-03-15 23:34:50 +08:00 via iPhone
@tomcats 还不如雪碧图…
|
|
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 仅缓存图片 |
Select Language