您现在的位置：程式碼之家 >> 編程語言 > >> Java 程式設計 >> Java 綜合教學

CSS Sprites 圖片精靈技術完整指南：原理、實戰、工具化與現代替代方案

編輯：Java 綜合教學

什麼是 CSS Sprites

CSS Sprites（圖片精靈/雪碧圖）是將多張小圖標/圖片合併為一張大圖，通過 CSS background-position 定位顯示所需部分。核心目的：減少 HTTP 請求數，提升頁面加載性能。

精靈圖示例

核心 CSS 實現

.sprite {
    display: inline-block;
    background-image: url('../images/sprite.png'); /* 合併大圖 */
    background-repeat: no-repeat;
    /* background-size: 200px 200px;  響應式/高清屏需設置 */
}

.icon-rank-1 { width: 20px; height: 20px; background-position: 0 0; }
.icon-rank-2 { width: 20px; height: 20px; background-position: -20px 0; }
.icon-rank-3 { width: 20px; height: 20px; background-position: -40px 0; }
.icon-arrow-up { width: 12px; height: 12px; background-position: -60px -10px; }
.icon-loading { width: 32px; height: 32px; background-position: 0 -50px; }

HTML 結構示例

<ul class="rank-list">
  <li class="top">
    <em class="icon-rank-1"></em>
    <p><a href="#">【慕客訪談】“有為屌絲”在路上</a></p>
  </li>
  <li class="top">
    <em class="icon-rank-2"></em>
    <p><a href="#">【有獎活動】給父親的三行書信</a></p>
  </li>
  <li>
    <em class="icon-rank-3"></em>
    <p><a href="#">《程序猿，請曬出你的童年》獲獎公告</a></p>
  </li>
</ul>

優勢與劣勢權衡

維度	優勢	劣勢/挑戰
網絡性能	請求數從 N 降為 1，顯著降低延遲、節省頻寬	首屏需加載大圖，可能延遲關鍵圖標顯示
維護成本	單文件管理	增刪改圖標需重新合併、重新測量座標、修改 CSS
響應式/高清屏	-	需多套圖（@1x/@2x/@3x）或 SVG，`background-size` 計算複雜
緩存策略	整張圖緩存	任一圖標修改導致整張圖緩存失效
可訪問性	-	背景圖無語義，螢幕閱讀器不可識，需輔助 ARIA/文本

自動化工具鏈：告別手工測量

構建時生成（推薦）

Webpack：webpack-spritesmith、postcss-sprites
Gulp/Grunt：gulp.spritesmith、grunt-spritesmith
輸出：合併圖片 + 對應 CSS/SCSS/Less 變量/類名映射

設計師協作流程

icon-home-normal.png

icon-home-hover.png

src/assets/sprites/

sprite.png

_sprite.scss

@include sprite($icon-home-normal)

現代替代方案：SVG Symbol / Icon Font / CSS Mask

1. SVG Symbol（目前最推薦）

<!-- sprite.svg -->
<svg style="display:none">
  <symbol id="icon-home" viewBox="0 0 1024 1024"><path d="..."/></symbol>
  <symbol id="icon-search" viewBox="0 0 1024 1024"><path d="..."/></symbol>
</svg>

<!-- 使用 -->
<svg class="icon"><use xlink:href="#icon-home"></use></svg>
<svg class="icon"><use xlink:href="#icon-search"></use></svg>

優勢：矢量無損縮放、單請求（內聯或外部引用）、CSS 控制顏色/大小、語義化、可訪問性好、支持多色、構建工具自動生成（svg-sprite-loader、vite-plugin-svg-sprite）。

2. Icon Font（FontAwesome 模式）

將圖標轉為字體文件（woff2/woff/ttf），通過 font-family + content: "\e900" 使用。劣勢：單色、抗鋸齒渲染差、字體加載閃爍 (FOIT/FOUT)、語義化差、維護字體文件麻煩。逐漸被 SVG 取代。

3. CSS Mask / Background Image (SVG Data URI)

.icon-home {
    width: 24px; height: 24px;
    mask: url("data:image/svg+xml,") no-repeat center;
    background-color: currentColor; /* 繼承文字顏色 */
}

適合極少量圖標、無構建工具項目。

實戰最佳實踐清單

新項目首選 SVG Symbol，構建工具鏈自動化
存量 Sprite 維護：引入自動化工具生成，嚴禁手工修改座標
命名規範：icon-{模塊}-{名稱}-{狀態}，如 icon-header-search-hover
間距預留：合併圖片時圖標間留 10-20px 透明間距，防止高清屏/縮放時相鄰圖標滲色
高清屏適配：生成 @2x/@3x 圖，媒體查詢切換 background-image + background-size
語義化補償：<span class="icon-search" aria-hidden="true"></span><span class="sr-only">搜索</span>
緩存策略：Sprite 圖片添加 Hash 文件名 sprite.a1b2c3.png，長期強緩存

總結

CSS Sprites 是 HTTP/1.1 時代的經典性能優化模式，核心邏輯是「以維護成本換取請求數減少」。在 HTTP/2 多路復用、SVG 矢量圖標普及、構建工具鏈成熟的今天，SVG Symbol 方案在幾乎所有維度上全面超越 Sprite。理解 Sprite 原理有助於維護老項目、理解性能優化演進史，但新項目應毫不猶豫擁抱現代圖標方案。