网页优化之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有很多好处,但同样有让开发人员郁闷的地方,那就是要计算大图片里的小图片的精确位置,图片大了的话计算起精确位置时会让很多同学抓狂的。

类似文章

一条评论

已关闭评论。