CSS雪碧圖是一種將多個小圖像合并為一個大圖像的技術。雪碧圖優點是減少了http請求數量，從而提高網站頁面的性能。但是在制作雪碧圖時，需要注意圖片的大小。

首先，雪碧圖的大小應該盡可能小，因為如果太大，會加重網站頁面的負擔，導致加載速度變慢。其次，圖像的大小也應該一致，否則不但會導致無法正確裁剪圖像，對于圖像最大尺寸的限制也會更加困難。

.icon {
background-image: url('sprites.png');
background-repeat: no-repeat;
}
.icon-home {
background-position: 0px 0px; /* 圖像所在位置 */
width: 32px; /* 單個圖像的寬度 */
height: 32px; /* 單個圖像的高度 */
}
.icon-setting {
background-position: -32px 0px;
width: 32px;
height: 32px;
}

在CSS中聲明雪碧圖時，需要注意單個圖像的寬度和高度應該與整張大圖的寬度和高度相等，否則會導致圖像無法裁剪正確。同時，在定義每個圖像的位置時，需要注意每個圖像之間的邊距，否則會導致多個圖像之間出現間隙。

總之，在制作CSS雪碧圖時，需要根據網站頁面的實際情況和需求，謹慎考慮圖像的大小和裁剪位置，以避免影響網站的頁面性能。