網(wǎng)頁圖片整理術(shù)：CSS Sprite的應(yīng)用

CSS Sprite 是一種圖片的處理方式，它允許網(wǎng)頁設(shè)計(jì)師將很多張圖片合并在同一張圖檔中，然后根據(jù) CSS 檔中的文字描述將圖檔分區(qū)塊加載，是現(xiàn)在很常見的網(wǎng)頁圖片處理方式。

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

而這張是 Facebook 頁面上所使用的小圖標(biāo)圖檔，像是大家最?？吹降?Like 圖標(biāo)其實(shí)也只是從這張圖片里面取出一小部分加以顯示而已。

諸如以上，幾乎現(xiàn)在的網(wǎng)站都會(huì)透過使用 CSS Sprite 來將網(wǎng)頁作優(yōu)化，比起傳統(tǒng)的切割圖片方式，使用 CSS Sprite 有著以下的優(yōu)點(diǎn)：

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

CSS Sprite 并不是一個(gè)新的概念，早在紅白機(jī)年代（或更早）的傳統(tǒng)的 2D 游戲設(shè)計(jì)中，游戲制作者就想到這種將角色圖片并排在一起以達(dá)到角色動(dòng)畫效果的作法，不但可以降低游戲體積，還可以提高機(jī)器運(yùn)行效率（在那個(gè)硬件不發(fā)達(dá)的年代更為重要）：

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

而CSS Sprite 的出現(xiàn)為這個(gè)情形提供了一個(gè)新的解決方式，像是Dumb Ways To Die 的官方網(wǎng)頁，即使了此方法重現(xiàn)了許多該影片中的動(dòng)畫片段。

如果去檢查網(wǎng)頁中使用的圖檔，就可以找到如以下的動(dòng)畫截圖：

CSS Sprite 雖然具有很多優(yōu)點(diǎn)，但是在制圖的時(shí)候其實(shí)需要相當(dāng)?shù)募?xì)心與耐心，每格圖像的尺寸以及間距都必須計(jì)算清楚并對(duì)齊，否則很容易出現(xiàn)跳動(dòng)或是沒對(duì)準(zhǔn)的情形。手工去逐一對(duì)準(zhǔn)及計(jì)算、排列常常會(huì)耗費(fèi)不少時(shí)間，這邊為大家介紹一些實(shí)用的小工具：

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

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

CSS Sprites Generator是一個(gè)網(wǎng)頁版的服務(wù)，它允許你上傳復(fù)數(shù)的現(xiàn)有圖檔，幫你合并好之后并提供 CSS 的文字給你，適合想將原本網(wǎng)站進(jìn)行 CSS Sprite 改造情況下使用：

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

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

原文：dclick.fourdesire.com