CSS Sprites對CSS布局的意義及優缺點
本文和大家重點討論一下CSS Sprites對CSS布局的意義、優點和缺點，CSS Sprites技術早在2005年 CSS Zengarden 的園主 Dave Shea就在ALA發表對該技術的詳細闡述，這里和大家重新認識一下它的用法。
CSS Sprites對CSS布局的意義、優點和缺點介紹
CSS Sprites技術早在2005年 CSS Zengarden 的園主 Dave Shea就在ALA發表對該技術的詳細闡述。
關于CSS Sprites技術的優化我們能做到多少，能減多少的請求數量。這并且不是單方面能做到的，一切取決于XHTML、CSS、CSS Sprites圖片之間的配合。現時為止沒有絕對優化的做法，這也是我在項目中經常衡量CSS Sprites圖片與XHTML關系，如:《一張背景實現自適應九宮格》，以下總結了圖片切割術與圖象優化的一些方法。
圖片優化
一、對于非動畫的GIF更建議使用PNG8因為它同樣能做到一樣的效果，而且能為你節省10%-30%的文件體積。
二、Photoshop相比起Fireworks，導出同等質量的PNG圖片，體積會稍大。而Fireworks雖然做了相應壓縮優化，但沒有達到***秀的壓縮。
三、我所知的設計軟件，對于PNG圖片的處理都沒做到***秀的壓縮，圖片體積還有一定的壓縮空間。可以嘗試使用下面介紹的”圖像優化工具” 做無失真的壓縮優化。
四、圖片體積及尺寸方面，建議體積保持在100K以內(較為符合國情***請求SIZE)，size為800px(***尺寸)。(從某權威人事中得知，具體無從考證)
CSS Sprites圖片切割術
一、CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position一般采用數字組合形式定位，這樣能減少維護帶來的不必要麻煩。
二、不建議CSS Sprites圖片中保持一定的間距，因為文件size增大而增加文件體積。
三、CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數，因為少色數的圖片文件體積會相對的小。
四、size相同的CSS Sprites圖片中留有較大空隙，某程度上多數情況會增大了體積，所以CSS Sprites的圖片不要有空隙。
五、在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的文件體積要大。
六、在CSS Sprites圖片中，水平排列的圖片會比垂直排列的文件體積要大。
七、圖片對等合并：應用CSS Sprites圖片時，適當地把對等相同的圖像合并，以節省空間及減少體積。
八、區分開不需要合并的圖像：如當前用戶確定只顯示一種狀態或一個級別時，不必要把其他的級別或狀態的圖片合并。
九、黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文本前的icon，因此不會受到其它CSS Sprites圖片干預，也不需要預留一定的行寬。
相關的圖像優化工具
網上流傳的優化工具繁多常見的如：
ImageMagick、PNGGauntlet、pngcrush、pngrewrite、Optipng、PNGOut等。
【編輯推薦】
