CSS Sprite：合併小圖以減少請求數

CSS Sprite 是一種效能優化技巧，目的是將多個小圖像合併成一張大圖，再透過 CSS background-position 顯示特定區塊，減少 HTTP 請求數量、提升載入效能。

傳統方式：多個 HTTP 請求。

css

.icon-home { background: url('home.png'); }
.icon-user { background: url('user.png'); }
.icon-cart { background: url('cart.png'); }

Sprite 方式：單一 HTTP 請求。

css

.sprite {
  background: url('sprites.png') no-repeat;
  display: inline-block;
}

.icon-home { background-position: 0 0; }
.icon-user { background-position: -32px 0; }
.icon-cart { background-position: -64px 0; }

現在的替代方案

做法	說明
內嵌 SVG	可用 CSS 改色、縮放不失真，最推薦
SVG Sprite	集中管理圖示，再以引用的方式取用
圖示字型	舊專案常見，但無障礙與對齊都較麻煩
CSS Sprite	相容舊環境時才考慮

圖片相關的取捨也可參考影像 <img> 與響應式影像。