网页优化之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有很多好处，但同样有让开发人员郁闷的地方，那就是要计算大图片里的小图片的精确位置，图片大了的话计算起精确位置时会让很多同学抓狂的。
10 条评论
哈哈，我使用你的主题就2个原因，简洁和速度。希望能继续开放些主题出来，至于收费与否那是大哥你的事情了，囧
说实话，这个主题的优化远远不够，几乎是没有做过优化，因为比较懒，呵呵。
好像W3C都没通过，等你那天心情好了没事了修改呗，工作第一
也许我修改后的v2英文版能给你点点灵感哦, 百分百W3C Strict验证通过, CSS3.0通过~
英文版还有一个改进就是特意在底部的Theme by prower去掉了我博客的链接。-_-!
-_-!
厉害, 被你发现了
前段时间忙于网站语言的定位和为了让主题可以通过最严厉的W3C认证, 一直没将主题的作者链接加入, 现在已经恢复了主题作者的链接!
相信博主不会那么计较吧
今天刚收到一封邮件提到了CSS Sprites，看了你的日志，俺明白了，thx
功能很强大，采用了CSS Sprites 技术，让我的网站速度快了一点，就这一点，意义是很大的，大大减少了向服务器Request！给网站服用器减压拉！再次感谢！
现在还有一些软件和在线工具，挺方便的。