CSS雪碧图的核心目的是合并多个小图标为一张图，通过单次HTTP请求加载全部图标，减少请求次数、加快页面加载；实操需统一单元格尺寸、固定排列、导出透明PNG并记录坐标，CSS用background-position精确定位，推荐Webpack插件等自动化工具生成。
图片雪碧图（CSS Sprite）的核心目的，就是把多个小图标合并成一张图，让浏览器只发起一次 HTTP 请求，就能拿到所有图标资源，从而显著减少服务器请求次数、加快页面加载速度。
为什么合并能减少请求次数
每个 img 标签 或每个 background-image 引用独立图片，都会触发一次 HTTP 请求。比如导航栏有 8 个图标，若各自外链，就要发 8 次请求；而合并为一张雪碧图后，只需 1 次请求，其余靠 CSS 定位显示对应区域——省下 7 次连接开销（建立 TCP 连接、TLS 握手等耗时明显）。
合并小图标的实操要点
关键不是“随便拼在一起”，而是保证后续 CSS 能精准定位：
- 统一单元格尺寸：建议按最大图标的尺寸向上取整（如多数图标是 24×24px，个别 32×32px，则设单元格为 32×32px），留出 1–2px 间距防边缘裁切
- 固定排列方式：常用垂直列排或网格排；避免随意堆叠，否则 background-position 值难计算、易出错
- 导出透明 PNG：用 Photoshop / Sketch / Figma 导出带 Alpha 通道的 PNG，兼容所有现代浏览器（IE8+ 支持 PNG-24）
- 记录每个图标的坐标：例如第一个图标左上角在 (0, 0)，第二个在 (0, −32px)，第三个在 (0, −64px)……这些值会直接用于 background-position
CSS 中如何调用单个图标
不写 <img src="icon-home.png">，而是用带背景的容器 + 精确偏移：
.icon-home {
width: 24px;
height: 24px;
background: url('./sprite.png') no-repeat 0 0;
}
.icon-user {
width: 24px;
height: 24px;
background: url('./sprite.png') no-repeat 0 -32px;
}
注意：background-position 的 Y 值通常为负数（因 CSS 坐标系原点在左上，向下偏移需负值），X 同理。也可用 background-size 配合百分比/精确值做响应式适配。
自动化合并更可靠
手动拼图易错、难维护。推荐工程化方案：
-
Webpack 插件：如
webpack-spritesmith，源目录放一堆 .png，构建时自动生成 sprite.png + 对应 CSS 类名 -
命令行工具：
spritesmith或spirit-cli，支持 Node 环境一键合成 - 在线工具：如 gopng，上传图标即得图与 CSS，适合快速验证
生成的 CSS 通常已封装好类名（如 .sprite-icon-search），直接在 HTML 中使用即可，无需手算坐标。
