站长之家-站标logo图片
欢迎你来到站长之家!
携手合作图片
banner图片
当前位置:网站首页 >> 站长经验 >>



站长之家分析CSS Sprites的优缺点及其使用场合


【发布人:本站站长    发布日期:2015-04-02】

关于CSS Sprites图片拼合技术,是CSS制作网页技术上用于快速展现图片的特殊技巧之一。CSS Sprites又称为CSS精灵,通常我们将之称为“CSS图像拼合”或“CSS贴图定位”,它将网页上能够使用到的图片整合到一张图片上,然后通过CSS的定位图片技术在浏览器上将这张大图片上的一个个小图片展现在相应的位置。

其作用主要是减少网页在打开时的HTTP请求IIS的次数,加快网页的显示速度,主要是加快网页上图片的展现速度,提升浏览者的体验效果。其实就是通过将多个图片融合到一张图里面,然后通过CSS里的background背景定位技术技巧布局网页背景。由此可见,网页上的图片越多,在浏览器浏览网页是所产生的http请求就越多,这将延长网页加载时间,而使用CSS Sprites则只有一次http请求,所以图片越多使用CSS Sprites的效果越显著。

使用CSS Sprites虽然有其优势所在,但也不是没有缺点,另外在使用CSS Sprites时也要挑选一些场合,有些场合适合使用,有的场合不适合使用。下面,笔者就来为各位站长们分析一下CSS Sprites的优缺点及其使用场合的问题。

一、使用CSS Sprites的优缺点分析:
1、CSS Sprites的优点:
很明显,CSS Sprites对于网站上有多个图片的时候,可以明显减少http请求的次数,加快网页打开速度,尤其是加快加载图片的速度,这对于有大量图片的网页非常适合使用。尤其是对于那些大型大流量网站,对于http请求非常看重,而采用这种CSS Sprites技术可以提升网页打开速度,降低服务器的工作量,节省服务端资源,无形中提升了网站浏览性能,对用户体验非常有好处。但这在图片较多的网站上非常有用,而在图片不多的网站上则优势并不明显。

2、CSS Sprites的缺点:
使用CSS Sprites技术虽然可以减少大量图片的http请求,图片越多效果越明显。但是图片越多,站长们就需要花费更多的时间来把这一个个图片拼合在一张大图片上,这需要花费一定的时间,图片越多花费的时间也越多。而且在图片拼合的时候,站长还要注意图片大小协调、合理有序,尽量占用最小的空间,防止拼合后的大图片过大。在制作网页的时候,站长还要通过photoshop或其他工具测量计算每一个单元图片的精确位置和其长宽,不能少错,这要求站长非常仔细,虽然没什么难度,但是很麻烦,容易出错,占用时间长,这是在是以站长的时间长,换取用户打开网页的时间短为代价。这还不是其缺点的全部,还有经过CSS Sprites拼合后的大图片在维护时也很麻烦,一旦更换一个小单元图片,就需要修改这个大图片,而且还可能要修改CSS代码里的图片定位数字,这无形中增大了维护的难度。

CSS Sprites技术虽然有其明显的有点,然而存在着平和图片、测量定位数值、修改不便等缺点,一般小型网站、小流量网站、一般企业网站不推荐使用这种技术,尤其是那些经常更换产品图片的网页,更不要使用这种技术了。但这并不是说CSS Sprites技术没有用武之地了,对于站长来说还是应该好好学习,灵活掌握的,这对于大型网站、大流量网站、图片不经常更换的网站上可以推荐使用。

二、CSS sprites使用的场合:
CSS Sprites技术最适合使用在那些图片较多的网站上,最好图片都是一些小图标类的图片,比如列表前的小图标、某些序列的图片等,由于这些图片较小,即便是很多小图标拼合起来,也只能拼合起一张并不太大的图片,而这些一个个小图标又太多,会占用大量的http请求,这是使用CSS Sprites技术对于节省http请求次数的网站尤其适合。但如果网页上有较大的图片,比如较大的banner图片,这样的大图片,一张图片就顶得上数个小图片,将这样的大图片拼合起来,就有点划不来了,所以大图片不推荐采用这种拼合图片的CSS Sprites技术了。


(本页地址为:http://www.zzdj.net/zzjy/zzjy-30.html,请尊重别人的劳动,不要复制和采集。转载请注明本文出处)

信息显示图片
页脚blank图片

版权所有:站长之家    备案号:豫ICP备14011667-1号