26. 什么是雪碧图，作用和原理了解吗

总结

1. 小图合成一张，使用 background 来使用，减少资源请求

---

一、什么是雪碧图？

雪碧图（CSS Sprite）是一种前端优化技术，指的是将多个小图标合并成一张大图，通过 CSS 控制显示其中的某一部分。

它常用于网站中图标、按钮等小图较多的场景。

---

二、雪碧图的作用

作用	说明
✅ 减少 HTTP 请求次数	合并多个图片为一张图，减少请求资源数
✅ 提升页面加载速度	尤其在图片较多时效果明显
✅ 避免图片加载闪烁	鼠标悬停切换图片时不会出现短暂空白
✅ 降低服务器压力	减少并发请求，优化服务器性能

---

三、雪碧图的原理

• 将多个小图标合并为一张大图（通常为 PNG 格式）。
• 通过 CSS 的 background-image、background-position 等属性，控制只显示某一小块区域。

示例代码：

<div class="icon icon-home">div>
<div class="icon icon-user">div>

.icon {
  width: 32px;
  height: 32px;
  background-image: url("sprite.png");
  background-repeat: no-repeat;
}

.icon-home {
  background-position: 0 0;
}

.icon-user {
  background-position: -32px 0;
}

假设 sprite.png 是一张合并图，每个图标大小为 32x32px，第二个图标横向偏移 -32px。

---

四、使用雪碧图的步骤

1. 准备图标资源：收集页面中所有小图标。
2. 使用工具合并图标：如 Photoshop、CSS Sprite Generator、Gulp、Webpack 插件等。
3. 编写 CSS 控制显示区域：通过 background-position 定位。
4. 应用到 HTML 元素上：结合类名使用。

---

五、适用场景

场景	说明
网站导航图标	如首页、用户、设置等小图标
按钮状态切换	hover、active 状态使用不同图标
多语言网站	图标统一加载，避免多次请求
移动端优化	减少请求数，提升加载速度

---

六、注意事项

注意点	说明
图标更新维护成本	修改一个图标可能需要重新生成整张图
不适合懒加载	雪碧图一次性加载，不适合按需加载
高分辨率适配问题	需要单独处理 @2x/@3x 雪碧图
现代替代方案	使用 SVG Sprite、IconFont、Web Components 等方式

---

七、现代替代方案对比

技术	优点	缺点
SVG Sprite	矢量、可缩放、支持 CSS 控制	老旧浏览器兼容性差
IconFont	易扩展、可控制大小/颜色	依赖字体文件，图标有限
Web Components	组件化、可复用	项目复杂度增加
CSS 雪碧图	简单、兼容性好	维护成本高

---

八、总结

内容	说明
雪碧图定义	多个小图标合并为一张图
核心作用	减少请求、提升加载速度
实现原理	利用 CSS 的背景图定位
推荐场景	图标密集、加载优化需求高
替代方案	SVG Sprite、IconFont、Web Components
注意事项	更新维护成本较高，现代项目可结合构建工具自动化处理

---