自动生成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的值和拼合后的图片。