關於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圖片中,垂直排列的圖片會比水平排列的檔案體積大。 Demo
在CSS Sprites圖片中,水平排列的圖片會比垂直排列的檔案體積大。 Demo
圖片對等合併:應用CSS Sprites圖片時,適當地將對等相同的影像合併,以節省空間及減少體積。 Demo
區分開不需要合併的影像:如目前使用者確定只顯示一種狀態或一個等級時,不必要把其他的等級或狀態的圖片合併。 Demo
黃金切割位:在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文字前的icon,因此不會受到其它CSS Sprites圖片幹預,也不需要預留一定的行寬。