CSS精靈圖是一種優化網站性能的技術，它將多個小圖標合并到一張大圖中，通過CSS把對應的位置顯示出來，減少了瀏覽器請求文件的次數，從而提高加載速度。下面我們來介紹一下CSS精靈圖的制作方法。

// HTML代碼
<div class="icon-facebook"></div>
<div class="icon-twitter"></div>
<div class="icon-instagram"></div>
// CSS代碼
.icon-facebook {
width: 32px;
height: 32px;
background-image: url(icon-sprite.png);
background-position: 0 0;
}
.icon-twitter {
width: 32px;
height: 32px;
background-image: url(icon-sprite.png);
background-position: -32px 0;
}
.icon-instagram {
width: 32px;
height: 32px;
background-image: url(icon-sprite.png);
background-position: -64px 0;
}

首先，我們需要把所有的小圖標拼接成一張大圖，可以使用Photoshop等圖形軟件來完成。在拼接時，需保證每個小圖標之間的間隔足夠，避免出現重疊。

接下來，我們需要為每個小圖標設置對應的CSS樣式。這里以三個圖標為例，分別是Facebook、Twitter和Instagram。每個圖標的CSS樣式包括寬度、高度、背景圖和背景位置。

在CSS代碼中，我們使用background-image屬性指定精靈圖的路徑，并使用background-position屬性設置圖標在大圖中的位置。其中，background-position的值為“X軸坐標 Y軸坐標”，可以使用負值調整位置。

最后，把對應的樣式應用到HTML元素上即可。這里使用div元素，并為每個圖標設置不同的class名。

通過以上步驟，我們就可以使用CSS精靈圖來優化網站性能，減少資源加載時間，提高用戶體驗。