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

[garlics]

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

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

[whileFalse]

@tomcats 还不如雪碧图…

[netnr]

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