CSS压缩和图片的优化是网站优化过程中很重要的一环，如果我们可以将多个小图片合成成一张大图，可以减少HTTP请求，这对于移动端的用户来说尤其有效。

1. 首先，我们需要将所有小图片合成一张大图。可以使用工具如SpriteGen在线生成或使用CSS Sprites生成器插件自动生成CSS Sprites

/*自动生成CSS Sprites代码*/
.icon1{background-image:url(images/sprites.png); background-position:0px 0px; width: 59px; height: 49px; }
.icon2{background-image:url(images/sprites.png); background-position:0px -50px; width: 49px; height: 49px; }
.icon3{background-image:url(images/sprites.png); background-position:0px -100px; width: 53px; height: 49px; }

2. 接下来，我们需要用CSS代码将原来每一个小图片的URL替换成新合成的大图片的URL，再通过background-position来选择对应的小图。

/*将原来的图片替换成新合成的图片*/
.icon1{background-image:url(images/sprites.png); background-position:0px 0px; width: 59px; height: 49px; }
.icon2{background-image:url(images/sprites.png); background-position:0px -50px; width: 49px; height: 49px; }
.icon3{background-image:url(images/sprites.png); background-position:0px -100px; width: 53px; height: 49px; }

3. 最后，我们需要在HTML代码中将原来的img标签替换成对应的CSS类名即可。

通过以上步骤，我们将多个小图片合成成一张大图，并使用CSS将小图摆放到需要的位置。这样，我们可以大大减少HTTP请求，从而加快网站的加载速度。