美國(guó)YAHOO在頁(yè)面制作中所用到的圖片整合技術(shù)，這樣做雖然需要花一定的時(shí)間來(lái)有規(guī)則的合并這些ICON，欄目背景，圖片按鈕，以方便CSS調(diào)用，但是這樣做絕對(duì)是合算的，而且是有必要的，YSlow也是極力推薦的。

實(shí)現(xiàn)方法：
首先將小圖片整合到一張大的圖片上，然后根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位。background-position:-8px -95px;
淺談CSS Sprites技術(shù)以及圖片優(yōu)化〔背景圖整合〕
關(guān)于CSS Sprites技術(shù)的優(yōu)化我們能做到多少，能減多少的請(qǐng)求數(shù)量。這并且不是單方面能做到的，一切取決于XHTML、CSS、CSS Sprites圖片之間的配合。現(xiàn)時(shí)為止沒(méi)有絕對(duì)優(yōu)化的做法，這也是我在項(xiàng)目中經(jīng)常衡量CSS Sprites圖片與XHTML關(guān)系，如:《一張背景實(shí)現(xiàn)自適應(yīng)九宮格》，以下總結(jié)了圖片切割術(shù)與圖象優(yōu)化的一些方法。

圖片優(yōu)化
一、對(duì)于非動(dòng)畫(huà)的GIF更建議使用PNG8因?yàn)樗瑯幽茏龅揭粯拥男Ч夷転槟愎?jié)省10%-30%的文件體積。
二、Photoshop相比起Fireworks，導(dǎo)出同等質(zhì)量的PNG圖片，體積會(huì)稍大。而Fireworks雖然做了相應(yīng)壓縮優(yōu)化，但沒(méi)有達(dá)到最優(yōu)秀的壓縮。
三、我所知的設(shè)計(jì)軟件，對(duì)于PNG圖片的處理都沒(méi)做到最優(yōu)秀的壓縮，圖片體積還有一定的壓縮空間。可以嘗試使用下面介紹的”圖像優(yōu)化工具” 做無(wú)失真的壓縮優(yōu)化。
四、圖片體積及尺寸方面，建議體積保持在100K以?xún)?nèi)(較為符合國(guó)情最佳請(qǐng)求SIZE)，size為800px(最佳尺寸)。(從某權(quán)威人事中得知，具體無(wú)從考證)

CSS Sprites圖片切割術(shù)
一、CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position一般采用數(shù)字組合形式定位，這樣能減少維護(hù)帶來(lái)的不必要麻煩。
二、不建議CSS Sprites圖片中保持一定的間距，因?yàn)槲募ize增大而增加文件體積。
三、CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數(shù)，因?yàn)樯偕珨?shù)的圖片文件體積會(huì)相對(duì)的小。
四、size相同的CSS Sprites圖片中留有較大空隙，某程度上多數(shù)情況會(huì)增大了體積，所以CSS Sprites的圖片不要有空隙。
五、在size相同的CSS Sprites圖片中，垂直排列的圖片會(huì)比水平排列的文件體積要大。
六、在CSS Sprites圖片中，水平排列的圖片會(huì)比垂直排列的文件體積要大。
七、圖片對(duì)等合并：應(yīng)用CSS Sprites圖片時(shí)，適當(dāng)?shù)匕褜?duì)等相同的圖像合并，以節(jié)省空間及減少體積。
八、區(qū)分開(kāi)不需要合并的圖像：如當(dāng)前用戶(hù)確定只顯示一種狀態(tài)或一個(gè)級(jí)別時(shí)，不必要把其他的級(jí)別或狀態(tài)的圖片合并。
九、黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動(dòng)位置最適宜擺放文本前的icon，因此不會(huì)受到其它CSS Sprites圖片干預(yù)，也不需要預(yù)留一定的行寬。

相關(guān)的圖像優(yōu)化工具，網(wǎng)上流傳的優(yōu)化工具繁多常見(jiàn)的如：
ImageMagick、PNGGauntlet、pngcrush、pngrewrite、Optipng、PNGOut等。
眾所周知，減少網(wǎng)站加載時(shí)間的最有效的方式之一就是減少網(wǎng)站的HTTP請(qǐng)求數(shù)。實(shí)現(xiàn)這一目標(biāo)的一個(gè)有效的方法就是通過(guò)CSSSprites——將多個(gè)圖片整合到一個(gè)圖片中，然后再用CSS來(lái)定位。
CSS Sprites 的目的就是通過(guò)整合圖片，減少對(duì)服務(wù)器的請(qǐng)求數(shù)量，從而加快頁(yè)面加載速度。

實(shí)現(xiàn)方法：
首先將小圖片整合到一張大的圖片上，為了簡(jiǎn)單化，可以把多圖放在同一列上，這樣就可以把x軸定義為0。
然后根據(jù)具體圖標(biāo)在大圖上的位置，給背景定位。background-position:-8px -95px;
例子：
我們使用上圖中的auther.gif作為背景時(shí)，如果代碼如下：

發(fā)表評(píng)論 共有條評(píng)論 用戶(hù)名: 密碼: 驗(yàn)證碼: 匿名發(fā)表