CSS 精靈是一種優化 web 頁面的技術，它通過將多個圖像合并為一個圖像，并使用 CSS 屬性來顯示所需的部分，從而減少頁面加載時間和 HTTP 請求。

一般來說，當網頁加載多張小圖片時，會產生很多的 HTTP 請求，這使得網頁加載時間大大增加，而 CSS 精靈可以幫助我們將多張小圖片打包成一張大圖片，并使用 CSS 來顯示所需的部分，從而減少了網頁的加載時間，提高了用戶體驗。

使用 CSS 精靈還有一個好處是可以減少圖像的大小，因為外部圖片格式需要附加一些額外的元數據，例如顏色空間、文件格式信息、光度級別等等。這些元數據將占用許多空間，而 CSS 精靈可以減少這些額外信息的存儲。

/* CSS 精靈樣式相關代碼示例 */
.sprite {
background-image: url(sprites.png);
background-repeat: no-repeat;
display: inline-block;
}
.logo {
width: 195px;
height: 72px;
background-position: -10px -10px;
}
.icon-home {
width: 20px;
height: 20px;
background-position: -50px -100px;
}
.icon-email {
width: 20px;
height: 20px;
background-position: -80px -100px;
}

在實際開發中，我們可以使用 CSS 精靈來優化頁面中的圖片加載，提高頁面的性能和用戶體驗。