CSS Performance - Sprite

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

傳統方式：多個 HTTP 請求。

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

Sprite 方式：單一 HTTP 請求。

.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; }