CSS雪碧圖是一種用于優化網頁性能的技術，它將多個小圖標合并成一個大圖，并通過CSS樣式表的background-position屬性，將需要的圖標調用出來。

.icon {
display: inline-block;
width: 24px;
height: 24px;
background-image: url("sprite.png");
}
.icon-home {
background-position: -6px -6px;
}
.icon-message {
background-position: -36px -6px;
}
.icon-setting {
background-position: -66px -6px;
}

在移動端，雪碧圖的使用尤為重要。因為移動端網絡環境的不穩定性，每次請求多張小圖標會增加網頁的加載時間，影響用戶體驗。而使用雪碧圖，只需要一次請求即可加載多個圖標，大大減少了請求次數。

同時，移動端的屏幕尺寸較小，需要縮小圖標的尺寸。為了防止圖標模糊，可以使用SVG格式的矢量圖標，或者使用2倍圖的方式，保證圖標在縮小后也有足夠的清晰度。

.icon {
display: inline-block;
width: 24px;
height: 24px;
background-image: url("sprite@2x.png");
background-size: 48px 48px;
}
.icon-home {
background-position: -12px -12px;
background-repeat: no-repeat;
}
.icon-message {
background-position: -72px -12px;
background-repeat: no-repeat;
}
.icon-setting {
background-position: -132px -12px;
background-repeat: no-repeat;
}

最后，需要注意的是，在使用雪碧圖時，要盡量減少圖標數量，不要將不必要的圖標合并進來，以免增大文件體積。同時，也要注意圖標之間的間隙，盡可能緊密排列，以減小合并后的文件大小。