使用 CSS Sprites 技巧可以有效減少 HTTP Request 的數量並且加速網頁載入與顯示的速度。簡單的來說，CSS Sprites 就是將頁面中會用到的背景圖檔全部集中放在一個圖片檔中，並利用 CSS 的 background-image 與 background-position 屬性將欲顯示的背景圖部分露出，對瀏覽器來說，如果整頁的背景圖原本有 30 張就會有 30 個 HTTP Request，但全部合在一張圖片後就只需要一個 HTTP Request 而已，還可以透過 HTTP Cache 技巧將圖片快取在瀏覽器中。
我們在之前也曾經實驗過採用 CSS Sprites 技巧在網站專案中，不過卻遇到一些討厭的問題：
- 若圖片採用 PNG 格式且有用漸層或透明背景的效果的話，在 IE6 會看不到。通常我們會用 IE6 PNG fix 解決此問題，不過 IE6 PNG fix 與 CSS Sprites 技巧不相容！(因為 background-image 與 background-position 的關係)
- 若將 CSS Sprites 技巧套用在網站主選單中，使用者在列印網頁時可能會看不到背景圖，除非他在網際網路選項中有勾選「列印背景的色彩及影像」（預設沒有勾選）。
- 套用在主選單還有另一個問題，就是原本應該出現圖片的卻改用「背景圖」處理，雖然我們後來是加入一個「看不見的」超連結替代，不過這種寫法實在有點髒。
最近在 Jennifer Semter 的部落格看到一則 extending css spriting 文章，他不再用 background-image 與 background-position 的技巧，改用標準的 DIV/A 標籤加上 img 標籤與 CSS 的絕對定址與 clip 屬性，直接裁切原本的大圖，將大圖中的一部份切出來顯示在畫面上，一樣是 CSS Sprites 的技巧，但用另一種更好的方法來實做而已。
套用此法的 HTML 如下（摘錄自 extending css spriting 文章）：
<div class="menu-about">
<img class="transparent_png"
src="http://www.jennifersemtner.com/wp-content/uploads/2008/12/company-menu.png"
alt="About" title="About Us" width="611" height="39" />
</div>
套用的 CSS 欲法如下：
.menu-about {
position: relative;
top: 0; left: -293px;
width: 106px; height: 29px;
}
.menu-about img {
position: absolute;
clip: rect(0 399px 29px 293px);
}
我覺得這方法的確比較符合實務的情境，不但能跨瀏覽器，列印的問題也解決了，HTML 也比較乾淨，但對於設計師來說可能會加重一些負擔，因為在設計的時候要去計算 position 的位址與圖片裁切的座標。我認識許多設計師，大多數設計師數學好像不太好，對於太邏輯的東西也有點排斥，要它們學習 CSS Sprites 的設計方式，可能會需要好好溝通教育一番。
相關連結