在 Web 性能优化的历史中，减少 HTTP 请求数量始终是提升页面加载速度的核心策略之一。尤其是在 HTTP/1.1 时代，浏览器对同一域名的并发连接数存在严格限制，大量的图片资源请求往往会导致网络拥塞和加载延迟。CSS Sprites，常被称为 CSS 雪碧图或精灵图，正是在此背景下诞生的一种经典前端性能优化技术。它通过将多个小型、零散的图片合并到一张大的图片（即“雪碧图”）中，从而将多次独立的 HTTP 请求合并为一次，极大地降低了网络开销。

CSS Sprites 的核心原理与优势

核心原理

CSS Sprites 的核心思想是资源合并。它将多个图标或背景图片整合到一张单一的图片文件中（称为 sprite sheet）。在需要显示其中某一张特定图片时，并非加载一个新文件，而是通过 CSS 的 background-image, background-position, width 和 height 属性，将包含该图片的 DOM 元素变成一个“视口”，精确地只展示出雪碧图上对应图片的部分。

性能优势

避免图片加载延迟: 一次性加载所有 UI 图片，可以防止在用户与页面交互（如悬停在按钮上）时，才临时去下载相应的图标，从而避免了视觉上的延迟或闪烁。

实现技术

实现 CSS Sprites 的过程，本质上是对 CSS background 相关属性的精确运用。

核心 CSS 属性

• background-image: 为所有需要使用雪碧图的元素或类，设置同一个雪碧图 URL。
• width / height: 为每个元素设置固定的尺寸，这个尺寸应与需要显示的单个小图片的尺寸完全匹配，以此来“裁剪”出可视区域。
• background-position: 这是最关键的一步。通过设置负值的 x 和 y 坐标，将巨大的雪碧图背景移动到合适的位置，使得只有需要显示的那张小图片正好落入由 width 和 height 定义的可视区域内。

<i class="flag flags-canada"></i>
<i class="flag flags-usa"></i>
<i class="flag flags-mexico"></i>

/* 共享的样式 */
.flag {
  display: inline-block;
  width: 200px; /* 假设所有国旗图标的宽度都为 200px */
  background-image: url('../images/flags.png');
  background-repeat: no-repeat;
}

/* 针对每个图标的独立样式 */
.flags-canada {
  height: 128px;
  /* 将背景图向左移动 5px, 向上移动 5px */
  background-position: -5px -5px;
}

.flags-usa {
  height: 135px;
  background-position: -5px -143px;
}

.flags-mexico {
  height: 147px;
  background-position: -5px -288px;
}

现代 Web 开发中的考量与替代方案

CSS Sprites 诞生于 HTTP/1.1 时代，其核心价值在于解决该协议下的请求并发限制问题。随着 Web 技术的发展，其必要性有所降低，但也出现了更现代的替代方案。