日期:2014-05-17  浏览次数:20839 次

CSS Sprites合并多个小图片

?

这种方法看似繁琐,但却是非常有实用价值的。

首先,CSS Sprites 能较少 HTTP 请求次数。
我们知道,HTTP 请求数对网站的工作性能有较大关联。如果背景图分开存放,每一次调用都会产生 HTTP 请求,一定程度上增加了服务器的负担。而单个背景图的设计方法,只需请求一次即可取回背景图片。很多大型网站,包括雅虎,新浪等,都采用了 CSS Sprites 技术。

其次,CSS Sprites 能防止背景图片延迟加载。
有时在点击以图片作背景的按钮时会发现,鼠标悬停的时刻才会触发浏览器下载背景图片,这是非常差劲的用户体验。但如果将图片存放与单个文件,就能避免延迟加载。因为在打开网页的首次请求中,图片已经加载完毕。

然而,使用单个图片文件存放的方法会降低可维护性。而且图片的定位比较繁琐,缺乏灵活性。在雅虎开发小组的 YUI 产品中,采用了加大图片距离的方法,同时也增加了图片的体积。

总之,CSS Sprites 有利也有弊。在追求性能的前提下,CSS Sprites 是值得推广的网页设计方法。

?

网页中经常涉及到很多小图片,一般能达到几十个,如果每个小图片来一次http请求,请求个数多大几十个。使用css sprites技术服务器端只需要将一个包含所有小图片的图片发送过来,由客户端使用css的背景图片及背景图片位置属性来显示图片即可。如此一来大大减少了服务器端的压力。

?

如今css sprites技术已经被很多大型网站使用,使用火狐的firebug观察google搜索页面的请求,会发送服务器端返回如下图片,此图片中包含了搜索页面大部分图片

而google log的html源码为

Html代码
  1. <a?title="Google?首页"?href="http://www.google.com.hk/webhp?hl=zh-CN"?id="logo">Google<img?width="167"?height="318"?alt=""?src="/images/nav_logo83.png"></a>??
<a title="Google 首页" href="http://www.google.com.hk/webhp?hl=zh-CN" id="logo">Google<img width="167" height="318" alt="" src="/images/nav_logo83.png"></a>

?其中logo对应css为

Html代码 复制代码
  1. #logo?{ ??
  2. ????display:?block; ??
  3. ????height:?41px; ??
  4. ????margin:?0; ??
  5. ????overflow:?hidden; ??
  6. ????position:?relative; ??
  7. ????width:?114px; ??
  8. } ??
  9. #logo?img?{ ??
  10. ????bac