为节省请求数而使用图标合成图

网页很多小图标，比如说，列表页，每一行都有一些相同的图标。

如果都用<img src="">，可能新的浏览器是每样图片只发一个请求（本地有缓存应该不发请求），老的浏览器不知道，可能是有多少个IMG就发多少个请求。

就算是每样图片只发一个请求，但这么多种图片，瞬间的请求还是挺多的。

处理办法是将这些图片都合成一个，然后在CSS里用

{background-image:url(...); background-repeat:no-repeat;background-position:-159px -39px;width:19px;height:17px;}

的方法。请求只有一个，节省多了。

通常，将图标设为背景图，还用在换肤上。所以，每个合成图，要搞多种颜色的不同版本。

我用PHOTOSHOP来搞。

步骤：

1、先做出一个合成图版本（GIF格式，成为模子图）。css也相应定义好。

2、新建同样尺寸的空白合成图，背景为透明。

3、将模子图拷贝到新图，这是一个图层

4、然后拷贝入各种替换的小图标，它们处于不同的图层。大小与模子图上是一样的，拖到合适位置，刚刚好覆盖要替换的小图标。

5、好了以后另存为GIF。另一种肤色的合成图就这样做好了。对应的CSS只要换上图片URL，坐标是不用调的。

注意事项：

1、草稿一定要是PSD格式，如果是GIF的话，有些好的图标拖进来，颜色会失真

2、不要为了节省空间，将各种小图标排得很挤，相互之间要有足够的空隙。因为有些浏览器效果很令人大吃一斤，比如IE6。背景要为透明。