CSS Sprites技术简介


做网站博客的朋友们差不多都知道百度站长工具,不知大家都用过否,里面有个功能叫“页面优化建议”。提交自己的网站稍等一会,百度就会给返回一个表单,详细罗列出网站有哪些可以优化的地方。其中有一个项目就是“CSS Sprite”。那么什么是“CSS Sprite”呢?

以下科普援引百度百科:

CSS Sprites 简介

CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

加速的关键,不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。

原理很简单,CSS Sprites技术把网页中频繁用到的一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”等属性的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites

浏览器在向网站请求数据的时候,网页里往往包含N多图片信息,而显示的每一张图片浏览器都需要请求一次数据,这样图片越多,浏览器发送请求就越多,网页加载速度明显减慢。利用CSS Sprites技术,普通制作方式下的大量图片,现在合并成一个图片,大大减少了HTTP的连接数,大大的提高了页面的性能,网站性能显著提升。从而,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因。

附一个CSS Sprites在线生成工具:CSS Sprites Generator

此网站可以将提交的多个图片按照用户指定的格式处理,并合成一张图片下载。

发表评论