雪碧图通过合并多个小图标为一张大图并用background-position定位显示区域，显著减少http请求、提升加载速度。需统一图标尺寸，用工具自动合成并设置间距与排列，css中定义宽高、背景图及负值偏移，html中用块级元素调用，注意文件大小、缓存策略及高清屏适配。
直接合并小图标为雪碧图，是减少HTTP请求最直观有效的方式之一。核心逻辑很简单：原本每个图标一次请求，现在全部打包成一张图，只发一次请求，浏览器一次性加载、复用。
怎么准备雪碧图
先整理所有要合并的小图标（如 home、search、user、menu 等），确保尺寸统一或有明确边界。推荐使用在线工具（如 CSS Sprite Generator）或本地工具（如 TexturePacker、Gulp 插件）自动合成。上传图标后，设置合理间距（建议 2–4px）、排列方向（横向更易维护）、缩放倍数（如 2x 适配 Retina 屏）。
怎么写对应的 CSS
生成的 CSS 通常包含一个公共背景图声明和多个定位类。关键点在于：
- 给每个图标元素设固定宽高（不能靠图片本身撑开）
- 用 background-position 精确控制显示区域（负值常见，例如
background-position: -40px -80px） - 加上 background-repeat: no-repeat 防止平铺
- 若支持高清屏，可配合 background-size 缩放整张雪碧图（如原图 200×200px，2x 图 400×400px，则设
background-size: 200px 200px）
怎么在 HTML 中使用
不直接用 <img>，而是用带 class 的标签，比如：
对应 CSS 示例：
.icon { background-image: url('sprite-2x.png'); background-repeat: no-repeat; }
.icon-home { width: 24px; height: 24px; background-position: 0 0; }
.icon-search { width: 24px; height: 24px; background-position: -24px 0; }
需要注意的实际问题
- 雪碧图不宜过大（建议单图 ≤ 200KB），否则首次加载延迟反而抵消请求减少收益
- 图标更新频繁时，整张图需重新生成，影响缓存效率；可按功能模块拆分多张雪碧图（如导航图标一张、操作按钮一张）
- 现代项目中，SVG Sprite 或 Icon Font 更易维护，但雪碧图在兼容性要求高或图标极多的老系统中仍有不可替代性
- 务必搭配强缓存策略（Cache-Control: max-age=31536000），让雪碧图长期驻留浏览器
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
