css sprite - web开发者的福音

在html页面中经常会嵌入许多图片，而一些大型站点（图片较为丰富）的站点会有一个问题就是每请求一个图片就会去作次HTTP请求，图片越小越密，HTTP请求的成本就越高，为了解决这个问题，于是应运而生了css sprite。

 

css sprite的意思就是把这么多小而密的图片（通常为背景图片）合成为一张，这样浏览器只要通过一次请求就可以把这些图片全部捞回来，而CSS代码端只需要通过background-position这样的方式定位到具体的本来的那张图片就可以了。不但减小了请求的次数，而且减小了整个图片的流量（许多人会问，为什么合成一张就会减小呢，答案是图片中的格式信息和颜色信息得到了重用）。

 

那是不是css sprite就需要我们在开发前期就注意到呢，答案是并非如此。目前提供这种css sprite服务的有许多，其中比较知名的应该是SpriteMe。具体用法可以参见http://css-tricks.com/css-sprites/ 。这个web服务总的意思就是当你新建的网页成型后，点击下在收藏夹下的SpriteMe标签，他就会通过js为你专门定制你这张页面下所以可以共用的图片，并支持导出CSS，其中那些图片的定位信息已经全部给你写好了，你只需检查下并覆盖就可以了，实在是非常的方便。

 

目前为止我还没有发现css sprite有什么坏处，那在SpriteMe的帮助下为什么不用它呢？