CSS Sprite 是一種圖片的處理方式，它允許網頁設計師將很多張圖片合并在同一張圖檔中，然后根據 CSS 檔中的文字描述將圖檔分區塊加載，是現在很常見的網頁圖片處理方式。

例如網頁上一個的按鈕的三種變化效果的圖片，將其順序擺放在同一個圖檔中使用：

而這張是 Facebook 頁面上所使用的小圖標圖檔，像是大家最常看到的 Like 圖標其實也只是從這張圖片里面取出一小部分加以顯示而已。

諸如以上，幾乎現在的網站都會透過使用 CSS Sprite 來將網頁作優化，比起傳統的切割圖片方式，使用 CSS Sprite 有著以下的優點：

• 方便整理、命名：由于將圖片合并了、圖檔的數量減少了，整理起來更為方便，同一個按鈕不同狀態的圖片也不需要一個個切割出來并個別命名。
• 修改以及調整更為快速：由于每個按鈕都在同一張圖檔中，設計師在事后修改細節時就可以在同一個檔案中工作，再也不用辛苦的切割圖檔。
• 檔案體積減小：雖然影響不大，但將圖檔合并可以有效的減少檔案的體積。
• 網頁讀取優化：考慮到網頁頁面優化的處理，這個算是讓設計師們選擇使用 CSS Sprite 的最大誘因了。對于網頁設計師來說，越多圖檔就表示每次瀏覽器都得向服務器逐一要求各個圖檔，與其讓每個用戶的瀏覽器頻繁不斷的跟服務器要求檔案，不如將這些檔案合并在一起，如此一來僅需處理一次要求即可，大幅減少了服務器的負擔！

CSS Sprite 并不是一個新的概念，早在紅白機年代（或更早）的傳統的 2D 游戲設計中，游戲制作者就想到這種將角色圖片并排在一起以達到角色動畫效果的作法，不但可以降低游戲體積，還可以提高機器運行效率（在那個硬件不發達的年代更為重要）：

同樣的技巧也可以應用在網頁上，以往在網頁中想要出現動畫的圖像，幾乎都只有從 Gif Animation 圖檔格式或是 Flash SWF 兩者中選擇一個使用，前者支持廣泛，規格卻不是很夠用，像是僅支持 256 色等；而 Flash 功能強大、目前卻面臨著支持度的挑戰。這個問題似乎一直很難找到一個滿意的解決方式。

而CSS Sprite 的出現為這個情形提供了一個新的解決方式，像是Dumb Ways To Die 的官方網頁，即使了此方法重現了許多該影片中的動畫片段。

如果去檢查網頁中使用的圖檔，就可以找到如以下的動畫截圖：

CSS Sprite 雖然具有很多優點，但是在制圖的時候其實需要相當的細心與耐心，每格圖像的尺寸以及間距都必須計算清楚并對齊，否則很容易出現跳動或是沒對準的情形。手工去逐一對準及計算、排列常常會耗費不少時間，這邊為大家介紹一些實用的小工具：

GuideGuide是一個免費的 Photoshop 插件，由于繪制 CSS Sprite 時需要大量的參考線輔助對位，因此新增參考線就變成一個非常瑣碎的工作：假設繪制一排18 x 18 px 的圖標，就會需要計算出一堆18、36、54、72......等遞增單位的參考線，既耗神又耗時，這時 GuideGuide 就可以快速的幫你完成這個任務！

Modular Grid Pattern是一個網頁版的服務，用戶可以快速創建出一套自定的網格，并且可以輸出 PNG 或是供 Photoshop 使用的圖樣檔 (pat) 等，方便設計師在 Photoshop 中對位使用。

CSS Sprites Generator是一個網頁版的服務，它允許你上傳復數的現有圖檔，幫你合并好之后并提供 CSS 的文字給你，適合想將原本網站進行 CSS Sprite 改造情況下使用：

CSS Sprites 樣式生成工具(bg2css)是一個在 Adobe AIR 環境開發下開發的程序，幫助程序設計師在拿到一張 CSS Sprite 圖檔之后，快速幫忙計算出每個圖檔的定位信息。

除了在實作上必須花費比較多的精神去做對位的處理，CSS Sprite 在后續維護上有時也會反而造成更多的困擾：例如必須增加圖標、或是其中一張圖片必須修改（尤其是尺寸）的時候，可能就不是置換圖檔就可以解決的，往往還得 回去修改 CSS 程序代碼才能夠完成，這時候反而增加了維護上的成本。盡管如此，CSS Sprite 還是相當值得衡量考慮使用的作法，尤其是當你的網站應用了大量圖標的時候，更可以顯示出 CSS Sprite 的優點。大家在制作時不仿衡量一下優缺點再來考慮是否使用 CSS Sprite 完成工作，才能達到事半功倍的效果。

原文：dclick.fourdesire.com