CSS Sprites 的优缺点

问题

CSS Sprites (雪碧图) 的优缺点是什么？

解答

CSS Sprites 是一种将多个小图片合并成一张大图的技术，通过 background-position 定位显示需要的部分。

基本用法

/* 假设雪碧图包含多个 32x32 的图标，横向排列 */
.icon {
  width: 32px;
  height: 32px;
  background-image: url('sprites.png');
  background-repeat: no-repeat;
}

/* 第一个图标，位置 (0, 0) */
.icon-home {
  background-position: 0 0;
}

/* 第二个图标，向左偏移 32px */
.icon-user {
  background-position: -32px 0;
}

/* 第三个图标，向左偏移 64px */
.icon-settings {
  background-position: -64px 0;
}

<span class="icon icon-home"></span>
<span class="icon icon-user"></span>
<span class="icon icon-settings"></span>

优点

1. 减少 HTTP 请求 - 多个图片合并为一个请求，降低网络开销
2. 减少图片总体积 - 合并后的图片通常比单独图片之和更小
3. 预加载资源 - 一次加载所有图标，避免 hover 等状态切换时的闪烁

缺点

1. 维护成本高 - 新增或修改图标需要重新生成整张雪碧图
2. 定位繁琐 - 需要精确计算每个图标的 background-position
3. 响应式困难 - 缩放时需要同时调整 background-size 和 background-position
4. HTTP/2 下优势减弱 - 多路复用使得合并请求的收益降低

现代替代方案

/* 1. Icon Font */
.icon-home::before {
  font-family: 'iconfont';
  content: '\e001';
}

/* 2. SVG Sprite */
<svg class="icon">
  <use xlink:href="#icon-home"></use>
</svg>

/* 3. 内联 SVG 或 Base64 */
.icon {
  background-image: url('data:image/svg+xml,...');
}

关键点

• 雪碧图通过合并图片减少 HTTP 请求，在 HTTP/1.1 时代效果显著
• 使用 background-position 负值定位到目标图标
• 维护困难是最大痛点，任何改动都需要重新生成
• 现代项目更推荐 SVG Sprite 或 Icon Font，支持缩放且易维护
• HTTP/2 环境下，雪碧图的性能优势已不明显