2、用Css图片拼合生成器将其拼合成一张图片，然后下载该图片
3、拼合完成后会生成相应的Css规则，该文件定位了每个图片的位置及图片的宽度和高度
4、在Css样式中定位背景图片！
如何使用CSS Sprites（图片合并）技术 众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS来定位。下面是一张样图：
本文的目的并不是讲CSS Sprite如何让一个网站更快，而是说一些使用CSS Sprite的时候的一些最佳实践。
不要等到你完成切片之后才开始sprite.
如果你边切图边写CSS，然后等你完成了整个网站之后再来拼接这些图片到一个Sprite中，你就不得不完全重写你的CSS，你也必须要花费很多的时间来用PS拼接大量的图片——这是件令人倍感纠结的事情。但是如果边切图边整合，就会比较容易些。
把图片放到它要显示的地方的相对的地方这个小技巧貌似比较难理解。
我直到创建一个比较大的sprite的时候才理解到这一点。比如，如果我们希望一个图片出现在一个元素的左侧：
将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS移动背景图片的位置的时候，基本上不可能有其它的小图片意外的出现在它的附近。使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。
定位时避免使用bottom或right等
当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px非常容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩展相关sprite图片的时候，原先设置的位置可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用确切的位置来避免这个问题。
给每个图片足够的空间
就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢？ 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。
例子：
例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片，你可以看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会意外出现。
不用担心Sprite图片的像素大小
如果你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就需要你个非常大的sprite来恰当的放置这些图片。这是很不错的。sprite里的空白不会占用太多的文件大小。addons.mozilla.org上使用的Sprite图片有1,000px×2,000 px那么大，但是图片的大小仅仅16.7kb
简单介绍一下 CSS Sprites 的优点：
当用户往U盘中拷200张图片，会等很久。但是如果弄成一个文件，再拷贝就会快很多.
CSS Sprites 的目的就是通过整合图片，减少对服务器的请求数量，从而加快页面加载速度。
实现方法：
首先将小图片整合到一张大的图片上
然后根据具体图标在大图上的位置，给背景定位。background-position:-8px -95px
CSS sprite 可以减少请求数、图片的总 size 和提前加载图片，但大图片合并可能导致页面显示速度变慢，如果搭配不合理也可能令图片失真。好多年前，我还不知道这玩意儿叫 CSS sprite 就写过一个相关文章：http://www.neoease.com/merge-icons-into-single-one/，现在这里算完善和补充。减少请求数
如
果图片量很大，可以有效提升页面加载速度。因为一般浏览器会有一定的并发上限（如：IE9 的默认最大并发数是
6），也就是进入页面渲染阶段可以同时连接上 6 个资源同时下载。如果现在有 40 个图片，那需要经过 6 轮下载才能完成，假设每个图片下载耗时
150ms，那么需要 1 秒左右才能下载完。如果将这这些图片合并，搭配合理、网速正常的情况下也不会超过 200ms。
图片总 size
首先，不做压缩的情况下实在减少不了多少图片的体积，对于 PNG-8 或者 GIF 或许可以将体积挤压掉较多，但因为图片本身不大基本上对网络没有消耗，可忽略不计。
提前加载图片
CSS
sprite 除了为性能提供利好，还是一个强大的功能，可以用来提前加载需要的图片。这里有个经典的案例：链接有两种状态，如果不使用 CSS
sprite，hover
状态用到的图片会在鼠标移动到链接上方才去下载，短时间图片缺失，体验不佳。这种场景下，可以将链接多种状态用到的图片合并在一起，那么在链接状态切换时
就不会有暂时缺图的情况。
不建议大图片合并
如果将大图片进行 sprite 处理，可能会适得其反，因为较大的图片对网络资源有一定的消耗，本来应该尽快显示的内容必须等到合并在一起的其他图片下载完才能显示，会导致打开页面时局部图片缺失。
建议类似图片合并
建议将文件类型相同并且颜色重叠度高的图片进行合并，一方面可以尽量减少体积。另一方面，因为图片使用颜色限制（PNG-8 和 GIF 最多 256 色），太多的颜色可能导致图片失真；对于 JPG 类图片，也可能因为图片过大而压缩导致失真。
总结
回归到楼主的问题，答案是：当图片数量较多，而且搭配合理的情况下，可以有效地提升网页速度；另外，借助 CSS sprite 的特性可以进行图片提前加载处理。
