自动生成CSS Sprite

什么是CSS Sprite?

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

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

怎样应用CSS Sprite?

如果用传统的方法,可以使用photoshop对图片进行测量定位,然后根据不同的定位手动编写CSS规则,不过这样对于多图片的时候处理十分花费时间,而且容易出错。

野草工作室在joomla建站的时候,也会用到CSS Sprite技术,以提高Joomla网站的访问速度。不过为了节省开发时间,我们会使用在线的自动生成CSS Sprite服务。

网站网址:http://cn.spritegen.website-performance.org/

使用的方法比较简单,就是把要拼合的图片打包成zip格式,然后上传到该网站。然后可设置的参数包括水平/垂直偏移、背景是否透明、css的类命名等。这些参数可以按照默认的,也可以根据自己的情况调整。然后点击“生成拼合图片&CSS”,网站就会自动生成相应的CSS规则和拼合后的图片。自动生成CSS的规则可能不一定完全适用于你的网站,这个其实没什么关系,我们主要只是想得到每个图片的background-position的值和拼合后的图片。