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

总结

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

一、什么是雪碧图？

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

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

二、雪碧图的作用

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

三、雪碧图的原理

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

示例代码：

.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。

四、使用雪碧图的步骤

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

五、适用场景

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

六、注意事项

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

七、现代替代方案对比

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

八、总结

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