做網(wǎng)站的都知道有一種將網(wǎng)站背景圖片拼接到一張圖片上的技術(shù):CSS Sprites圖片整合技術(shù)。深圳網(wǎng)站建設(shè)公司【創(chuàng)絡(luò)】大約在兩年前的一小段時間內(nèi)非常癡迷于這種技術(shù)的使用。因為它確實可以從很大程度上降低網(wǎng)站服務(wù)器的請求次數(shù),從而提高網(wǎng)站的訪問速度,然而,為什么我們會很快的放棄這種技術(shù)呢?原因是:這樣做出來的網(wǎng)站很難維護。
我們先來了解一些和Sprites技術(shù)相關(guān)的信息,對于非動畫的GIF更建議使用PNG8因為它同樣能做到一樣的效果,而且能為你節(jié)省10%-30%的文件體積。而Sprites技術(shù)就是將網(wǎng)站上的所有圖片集成到一張PNG或者GIF圖片上去。常見的圖片切割技術(shù)是圖片順序由上至下、左至右添加。而background-position一般采用數(shù)字組合形式定位,這樣能減少維護帶來的不必要麻煩。SS Sprites圖片中的圖片都是緊挨在一起的,目的是最大限度的縮小文件體積。把顏色較近或相同的組合在一起可以降低顏色數(shù),因為少色數(shù)的圖片文件體積會相對的小。
一般我們會采用水平排列圖片而非垂直排列,目的當(dāng)然還是縮小圖片文件的體積,因為垂直排列的圖片會比水平排列的圖片體積要大。適當(dāng)?shù)匕褜Φ认嗤膱D像合并,以節(jié)省空間及減少體積。區(qū)分開不需要合并的圖像。最右或左邊為最靈活動位置最適宜擺放文本前的ICO,不會受到其它PNG圖片的干預(yù),因此不需要預(yù)留空間。
由于整個網(wǎng)站的圖片全部都在這一個圖片上面,因此,我們需要在每一個DIV中通過精確的position屬性來定位。如果有一天客戶要求改變某一個DIV的大小,那么整個CSS文檔就用全部重新寫,這是多么痛苦的一件事情?。慷盍钊顺泽@的,沒有任何一位客戶可以保證他在未來不會去修改網(wǎng)站。因此,我們只好選擇放棄使用這種技術(shù),轉(zhuǎn)而從其他方面努力提高網(wǎng)站的速度。