简单来说，CSS精灵图就是将多个图片合并为一个大图片，然后利用CSS样式表中的background-image、background-position、background-repeat等属性来显示合成的图片中的不同位置上的小图片。

#icon {
background-image: url(sprites.png);
width: 20px;
height: 20px;
}
#icon-home {
background-position: 0 0;
}
#icon-message {
background-position: -20px 0;
}
#icon-user {
background-position: -40px 0;
}

通过将多个小图片合并为一个大图片，可以减少网络请求次数，提高页面加载速度。同时，单个文件较大，缓存效果更佳。

但是，在制作CSS精灵图时需要注意以下问题：

• 图片之间不能有空隙，否则使用时可能出现偏移
• 所有小图片的尺寸最好相等，否则背景定位可能不准确
• 背景定位需要精确计算，否则导致图片错位

总体来说，CSS精灵图是一个有效的优化网页加载速度的方法，但是在制作和使用时需要仔细处理，防止出现问题。