什麼是 CSS Sprite？

將多張小圖標/背景圖拼合成一張大圖，透過 background-position 定位顯示所需區塊，減少 HTTP 請求數。

歷史脈絡：從盲目跟風到理性評估

早期 HTTP/1.1 連線限制（每域名 6 條連線），Sprite 顯著降低請求數，一度成為「專業標配」。但隨著 HTTP/2 多路複用普及、HTTP/3 QUIC、瀏覽器並發連線提升，請求成本大幅降低，Sprite 優勢遞減。

適用條件（三大前提，缺一不可）

1. 專案已凍結：功能、模組、交互、程式全部測試通過，即將上線，不再頻繁改動 UI。
2. 長期穩定：不會「今天上線、明天改按鈕大小、後天換圖標」。
3. 高流量站點：需極致壓榨 HTTP 請求數（如首頁、核心落地頁）。

不適用場景

• 內容類圖片（商品圖、文章配圖、用戶頭像） → 需獨立快取、CDN、響應式圖片。
• 需重複平鋪的背景圖（repeat-x/y） → Sprite 破壞平鋪。
• 頻繁迭代的專案（敏捷開發、A/B 測試、持續部署） → 維護成本極高。

維護痛點實錄

• 改一張圖，動全身：大圖內某圖標尺寸變更 → 重新拼圖 → 所有 background-position 重新計算。
• 間距管理：圖標間需預留間距防止高解析度裝置鄰圖滲漏，拼圖時需精確像素對齊。
• 協作衝突：多人同時修改 Sprite 大圖極易產生 Git 衝突，解決困難。

現代替代方案

方案	原理	優勢	適用場景
SVG Sprite / Symbol	<symbol id="icon-x"> + <use xlink:href="#icon-x">	向量無損縮放、CSS 可控顏色/大小、單一請求、語意化	圖標系統、圖示字體替代
Icon Font (FontAwesome 等)	字體檔案載入，字符映射圖形	縮放不失真、CSS 控色、舊瀏覽器相容	純單色圖標、快速原型
HTTP/2 + 獨立圖片	多路複用並行下載	無拼圖維護、獨立快取、按需載入	現代專案、中小型圖標集
WebP/AVIF + <picture>	新一代圖片格式 + 響應式選擇	體積極小、品質高、瀏覽器原生支援	所有位圖資源
CSS Mask / Clip-path	單一圖片配合遮罩/裁切顯示不同區塊	無需拼圖、動態切換	狀態圖標（hover/active/disabled）

決策清單：你的專案適合 Sprite 嗎？

1. 專案是否已凍結 UI，未來半年不改版？
2. 圖標數量 > 30 且極少變動？
3. 流量極大，HTTP/2 尚未全站啟用？
4. 團隊有成熟 Sprite 自動化構建流程（Grunt/Gulp/Webpack plugin）？

若上述 全為「是」，可考慮 Sprite；否則優先選擇 SVG Symbol + HTTP/2 組合。

結語

技術無好壞，只有「是否適合當下語境」。CSS Sprite 是 HTTP/1 時代的智慧結晶，理解其原理與限制，才能在現代工程中做出正確選擇。