雪碧圖是一種CSS影象合併技術，該方法是將小圖示和背景影象合併到一張圖片上，然後利用css的背景定位來顯示需要顯示的圖片部分。

雪碧圖被運用在眾多使用了很多小圖示的網站上。相對於把每張小圖示以.png格式檔案的形式引用到頁面上，使用雪碧圖只需要引用一張圖片，對記憶體和頻寬更好，並且可以減小圖片的總大小。

使用雪碧圖的優點有以下幾點：

1. 將多張圖片合併到一張圖片中，可以減小圖片的總大小

2. 將多張圖片合併到一張圖片後，只需一次網路請求就可以將所需的資源全部下載，減小建立連線的消耗，在移動端尤為明顯

雪碧圖的製作與使用方法：

1. 使用影象編輯軟體如Photoshop將多張圖放到同一個圖層並匯出或使用自動化構建工具自動拼接合並後的圖片

2. 引用圖片時，圖片地址為合併後的圖片地址，通過background-position調整背景圖的位置，並通過容器的寬高共同作用，來選出所需的圖片