雪碧圖：將多張圖片整合到一張圖片上，利用ps設置器位置，展示到網頁上
CSS Sprites一般只能使用到固定大小的盒子（box）里，這樣才能夠遮擋住不應該看到的部分。
1.優點
1、利用CSS Sprites能很好地減少網頁的http請求，從而大大的提高頁面的性能，這也是CSS Sprites最大的優點，也是其被廣泛傳播和應用的主要原因；
2、CSS Sprites能減少圖片的字節，曾經比較過多次3張圖片合並成1張圖片的字節總是小於這3張圖片的字節總和。
3、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。
4、更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。
2.缺點
1、在圖片合並的時候，你要把多張圖片有序的合理的合並成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
2、至於可維護性，這是一般雙刃劍。可能有人喜歡，有人不喜歡，因為每次的圖片改動都得往這個圖片刪除或添加內容，顯得稍微繁瑣。而且算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情。當然，在性能的口號下，這些都是可以克服的。
3、由於圖片的位置需要固定為某個絕對數值，這就失去了諸如center之類的靈活性。
4、前面我們也提到了，必須限制盒子的大小才能使用CSS Sprites，否則可能會出現出現干擾圖片的情況。這就是說，在一些需要非單向的平鋪背景和需要網頁縮放的情況下，CSS Sprites並不合適。YUI的解決方式是，加大圖片之間的距離，這樣可以保持有限度的縮放。
3.CSS Sprites圖片切割術
1、CSS Sprites圖片順序合圖片由上至下、左至右添加。而background-position一般采用數字組合形式定位，這樣能減少維護帶來的不必要麻煩。
2、不建議CSS Sprites圖片中保持一定的間距，因為文件size增大而增加文件體積。
3、CSS Sprites圖片中把顏色較近或相同的組合在一起可以降低顏色數，因為少色數的圖片文件體積會相對的小。
4、size相同的CSS Sprites圖片中留有較大空隙，某程度上多數情況會增大了體積，所以CSS Sprites的圖片不要有空隙。
5、在size相同的CSS Sprites圖片中，垂直排列的圖片會比水平排列的文件體積要大。
6、在CSS Sprites圖片中，水平排列的圖片會比垂直排列的文件體積要大。
7、圖片對等合並：應用CSS Sprites圖片時，適當地把對等相同的圖像合並，以節省空間及減少體積。
8、區分開不需要合並的圖像：如當前用戶確定只顯示一種狀態或一個級別時，不必要把其他的級別或狀態的圖片合並。
9、黃金切割位：在CSS Sprites圖片的最右或左邊為最靈活動位置最適宜擺放文本前的icon，因此不會受到其它CSS Sprites圖片干預，也不需要預留一定的行寬。