网页优化之CSS Sprites

对于访问者来说，网站的页面能够即时的呈现出来，无疑是让人感到很愉快的一件事；而相反的是如果网页打开速度很慢的话，无疑这个网站将损失很多的用户。据许多研究表明：用户最满意的打开网页时间，是在2秒以下；用户能够忍受的最长等待时间的中位数，在6～8秒之间；如果等待12秒以后，网页还是没有载入，那么99%以上的用户会关闭这个网页，不再等待。

网页的呈现速度直接影响到网站的用户访问数量，所以网站优化是网站建设中必不可少的步骤。虽然网页加载过程中的大部分时间是耗在图片及FLASH等元素的加载上，但很多时候，这些图片或是FLASH等元素是网站的建设者很难控制的，所以大部分的网站优化还是从网站的代码优化着手。

减少HTTP请求数则是代码优化中很基础也很重要的一个环节，而一个网页中的所使用到的图片（诸如小图标之类的）往往占有很大部分的HTTP请求，所以将这些图片合并成一张大的背景图时，不但可以减少图片整体的大小外，最重要的还是可以减少HTTP请求数。

对于CSS的背景图属性相信大部分人都知道，其中有一个属性是“background-position”，即是背景图像定位，利用这个属性可以很容易的定位到图像的某个位置，这就是CSS Sprites的原理。

通过将多个小图片合并成一张大图片，然后利用背景图像定位指定地方所需要的图片，这样子浏览器只需要下载一次这张图片，就可以用于多个地方的图片显示。

虽然利用CSS Sprites可以减少HTTP请求数，也可以减少图片的总体大小，但并不是所有的网页中的背景图都可以利用CSS Sprites来解决的，比如有平铺行为的背景图就不太适合使用CSS Sprites来处理。因为小图片合并而成的大图片可能会产生空隙，如果有空隙的话，就无法使用CSS Sprites来处理平铺背景。

虽然CSS Sprites有很多好处，但同样有让开发人员郁闷的地方，那就是要计算大图片里的小图片的精确位置，图片大了的话计算起精确位置时会让很多同学抓狂的。