在網頁設計中，用到了CSS的sprite技術，將多個小圖標（如按鈕，小圖形）拼接成一個大圖，這樣整個頁面只需要加載一張圖片，減少了頁面HTTP請求次數，提高了頁面加載速度。由于拼接后的圖片與冰雪中的晶體一樣，因此CSS雪碧圖這個術語也就應運而生了。

雖然雪碧圖看起來很簡單，但生成雪碧圖卻需要復雜的計算機自動化技術支持。通常，我們需要一些雪碧圖生成工具來輔助自己完成。比如說，將一堆小圖標拖進PS中，用動作將每張圖片處理成一樣大小，調整到合適位置，再用插件生成大圖，手動記錄位置信息，導出CSS文件。 這樣做的好處在于提高了頁面性能，優化了交互體驗。

.icon-home{
background:url(sprite.png) no-repeat 0 0;
width:32px;
height:32px;
}

以上代碼是CSS中用雪碧圖的例子。我們將包含圖標的大圖sprite.png作為背景，將背景的上邊界和左邊界分別設置為0，0（即雪碧圖上的第一片），然后就可以精確地顯示出所需圖標了。

盡管使用雪碧圖會帶來性能提升，但是也需要注意雪碧圖文件的大小。如果文件太大，加速的效果就得不償失。因此，在創建雪碧圖時需要注意圖片質量、圖片大小、每個小圖行列間隔大小等。