CSS Sprites 有什么用？

把多张小图标拼成一张图，用 background-position 显示其中一块，能把多次图片请求合并成一次，减少 HTTP 请求、提升加载性能，是经典的前端优化手法。

现在还需要用雪碧图吗？

HTTP/2 多路复用后，请求数的收益已减弱，很多场景改用 SVG symbol 或字体图标。但在 HTTP/1.1 环境、或需要位图图标批量管理时，雪碧图仍实用。

把下载的 sprite.png 放到项目里，给元素加 .sprite 和对应的 .sprite-名称两个类即可显示那一块图标。

不会。合并与生成全部在浏览器 Canvas 本地完成，图片不离开你的设备。

多张小图标合并成一张雪碧图，自动生成每张的 background-position 定位 CSS，可下载 PNG。本地、不上传。

间距px

选择多张小图标，合并成一张雪碧图并生成定位 CSS（本地、不上传）

选多张小图标，设间距，点「生成雪碧图」——右侧给出定位 CSS，左侧可下载 sprite.png。用法：元素加 .sprite + .sprite-名称 两个类。

HTTP/2 后请求合并收益变小，很多团队转向 SVG symbol / 字体图标。但在老环境或批量位图图标场景，雪碧图仍是稳妥选择。

同类还有图片格式转换、SVG 代码预览、图片压缩，均纯前端运行、不上传、不追踪。