CSS 利用 Sprite 來提升效能

希望有朝一日能派上用場。

簡述

簡單來說就是「把很多張圖片拼成一張」，這樣可以省下發 request 的次數。

可以想成是在窗外放了一個超大的海報，只要調整海報的位置，就會看到不一樣的畫面，這個就是 Sprite 的把戲。

實作

直接來看個例子，假設我有一張圖片長這樣：

我想把它做成三顆 <button>，所以 HTML 長這樣：

<div class="buttons">
  <button></button>
  <button></button>
  <button></button>
</div>

接下來就來用 CSS 做出 Sprite。先大概講一下原理：

1. 幫每個 <button> 都套用同一張背景圖片
2. 利用 background-position 來調整位置（這個是重點）

所以 CSS 就會這樣寫：

.buttons {
  width: 300px;
  padding: 10px;
  margin: auto;
  border: 1px solid #000;
}
/* 每個按鈕的共通樣式 */
button {
  width: 51px;
  height: 51px;
  background-image: url('./button.png');
  background-repeat: no-repeat;
  background-color: transparent;
  border: none;
  padding: 0;
}
/* 把背景圖片往左移 51 px */
button:nth-child(2) {
  background-position: -51px 0;
}
/* 把背景圖片往左移 102 px */
button:nth-child(3) {
  background-position: -102px 0;
}

備註：每個按鈕的寬高是由圖片來決定。像這邊的圖片尺寸為 154x51，所以一個按鈕才設定為 51x51

成功的話就會長這樣：

以上就是 Sprite 的技巧，雖然這個技巧會花比較多工夫，但善用的話就能為伺服器節省不少流量與負擔。