css sprite技术 – 减少网站图片请求次数

     CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。

     对于当前网络流行的速度而言，不高于200KB的单张图片的所需载入时间基本是差不多的，所以无需顾忌这个问题。加速的关键，不是降低重量，而是减少个数。

     传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以，图片越多请求次数越多，造成延迟的可能性也就越大。

　  CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

     优点：减少浏览器与服务器之间的通信次数

              a、一张图片的大小会比很多张分散的图片小

              b、这样可以一次加载完图片，例如做按钮的普通和hover状态时，如果用两张图片，那么在一些浏览器下，hover的时候明显有一个空白再切换图片的过程，而如果合成一张图片，通过background-position就不会有这种问题了。

              c、如果多个css样式都会用到合成的图片，那么最后将它们放到一起来设置它们的背景图片。如div1,div2 { background:url(..); } IE6下不会缓存图片，这样的话就避免了每次读到一个样式的时候都要重新加载同一张图片