CSS Sprites技術(shù)以及圖片優(yōu)化

2020-03-24 16:19:29

字體：大中小

供稿：網(wǎng)友

關(guān)于CSS Sprites技術(shù)的優(yōu)化我們能做到多少，能減多少的請求數(shù)量。這并且不是單方面能做到的，一切取決于XHTML、CSS、CSS Sprites圖片之間的配合。現(xiàn)時為止沒有絕對優(yōu)化的做法，這也是我在項目中經(jīng)常衡量CSS Sprites圖片與XHTML關(guān)系，如:《一張背景實現(xiàn)自適應九宮格》，以下總結(jié)了圖片切割術(shù)與圖象優(yōu)化的一些方法。圖片優(yōu)化對于非動畫的GIF更建議使用PNG8因為它同樣能做到一樣的效果，而且能為你節(jié)省10%-30%的文件體積。 Photoshop相比起Fireworks，導出同等質(zhì)量的PNG圖片，體積會稍大。而Fireworks雖然做了相應壓縮優(yōu)化，但沒有達到最優(yōu)秀的壓縮。我所知的設(shè)計軟件，對于PNG圖片的處理都沒做到最優(yōu)秀的壓縮，圖片體積還有一定的壓縮空間。可以嘗試使用下面介紹的”圖像優(yōu)化工具” 做無失真的壓縮優(yōu)化。圖片體積及尺寸方面，建議體積保持在100K以內(nèi)(較為符合國情最佳請求SIZE)，size為800px(最佳尺寸)。(從某權(quán)威人事中得知，具體無從考證) CSS Sprites圖片切割術(shù) CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position一般采用數(shù)字組合形式定位，這樣能減少維護帶來的不必要麻煩。不建議CSS Sprites圖片中保持一定的間距，因為文件size增大而增加文件體積。 CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數(shù)，因為少色數(shù)的圖片文件體積會相對的小。 size相同的CSS Sprites圖片中留有較大空隙，某程度上多數(shù)情況會增大了體積，所以CSS Sprites的圖片不要有空隙。在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的文件體積要大。Demo 在CSS Sprites圖片中，水平排列的圖片會比垂直排列的文件體積要大。Demo 圖片對等合并：應用CSS Sprites圖片時，適當?shù)匕褜Φ认嗤膱D像合并，以節(jié)省空間及減少體積。Demo 區(qū)分開不需要合并的圖像：如當前用戶確定只顯示一種狀態(tài)或一個級別時，不必要把其他的級別或狀態(tài)的圖片合并。Demo 黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文本前的icon，因此不會受到其它CSS Sprites圖片干預，也不需要預留一定的行寬
html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS圓角背景與三角形實現(xiàn)辦法

下一篇：CSS技巧- 模塊化編碼