CSS Sprite (CSS精灵)

也许你遇到过这样的情况,当你看到一个好看的网站,想下载它的图片时,发现下下来的不是一个单独的图片,而是好多图片组合在一起的一张大图片。这就是典型的CSS精灵。

CSS精灵,英文名称CSS Sprite,是一种将网站中的小图片组合成一张大图片在网站中使用的方式。为什么要将小图片组合成大图片呢?主要是为了减少浏览器对服务器的请求次数。因为用户在浏览网站的时候,每次请求都是需要时间的。也许你的网页代码,图片,JS等的下载并不是最占用用户浏览时间的,占用户浏览时间最多的是用户每次的请求时间。html每个请求都要经过TCP协议的三次握手,用http watch观察一下浏览网站的时间构成,就能发现,请求占用的时间还是非常多的。所以,有效的减少http请求的次数是加快网站速度的一个方面。CSS精灵正是通过这个来优化你的网站的。

当然,将所有的小图片组合成大图片,无疑在下载大图时会变慢,此时会对网站的速度带来一定影响。所以,并不是所有网站都适合使用css精灵的。需要衡量使用css精灵带来的利弊,然后再确定是否使用。当然,如果你的网站有很多小图,这些小图组合起来的大图也不大的话,必然很适合使用css精灵进行优化。

CSS精灵的具体操作其实很简单,基本原理就是将组合的大图作为每一个需要小图的控件的背景,然后通过调整背景图片的位置来显示不同的图片。再具体的就不说了,自己网上看一下,很简单的。http://cn.spritegen.website-performance.org/这个网站能够通过上传小图,自动生成大图,并生成了使用的css代码,可以帮你更快的上手css精灵。

贾定强微信

微信扫一下,或点击链接添加好友