不知道您在瀏覽yahoo.com的網頁中是否注意到,yahoo在頁面製作上的技術和大多數網站不一樣,他們把頁面上的 ICON，欄目背景啊，圖片按鈕啊等都有會有規則的合併一張背景圖,然後用background-position來實現背景圖片的定位，他們爲什麼要花費一些時間來合併這些CSS背景圖片呢,CSS中用一張背景圖做頁面的技術到底有什麼優勢呢?
當您往U盤中拷200張圖片，會等很久。但是如果弄成一個文件，再拷貝就會快很多。CSS Sprites(圖片整合技術) 的目的就是通過整合圖片，減少對服務器的請求數量，從而加快頁面加載速度。如下圖所示:
美國YAHOO在頁面製作中所用到的圖片整合技術，這樣做雖然需要花一定的時間來有規則的合併這些ICON，欄目背景，圖片按鈕，以方便CSS調用，但是這樣做絕對是合算的，而且是有必要的，YSlow也是極力推薦的。
實現方法：
首先將小圖片整合到一張大的圖片上，然後根據具體圖標在大圖上的位置，給背景定位。background-position:-8px -95px;
淺談CSS Sprites技術以及圖片優化 〔背景圖整合〕
關於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等。
演示：
<div class="max">最大化</div>
<div class="min">最小化</div>
這兩個class都使用同一個圖片：
.min, max {
width:16px;
height:16px;
background-image:url(http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png);
background-repeat: no-repeat; //我們並不想讓它平鋪
text-indent:-999em; //隱藏文本的一種方法
}
效果如下：
最大化
最小化
最大化最小化
我們看到一團灰，沒錯，因爲我們還沒有指定background-position，默認爲 0 0，可以看下 sprite.png , 處於這個位置正是灰塊。好了，我們要找到代表最大化的加號和代表最小化的減號的位置找出來。經過測量，最大化按鈕位於Y軸的350px處，最小化按鈕位於 Y軸400px處。想一想我們如何才能讓它們能夠顯示出來呢，明顯，要向上提升sprite.png，得到代碼如下：
.max {
background-position: 0 -350px;
}
.min {
background-position: 0 -400px;
}
