CSS Sprites的一些事儿

最近在学习使用YSlow分析网站性能时，看到Yahoo关于优化网站性能的35条规则^[1]，其中就有提到CSS Sprites（减少HTTP请求^[2]），于是就对CSS Sprites产生了兴趣，网上查了很多资料，杂七杂八，且说的都大同小异，或者直接推荐国外的资料网站。CSS Sprites技术在国外并不是什么新技术，只不过近两年(尤其08年开始)中国开始流行这个词，大家也开始越来越关注CSS Sprites这个没有标准中文翻译的技术。经过一番的搜索，基本上对CSS Sprites有一个大致的了解，现在就将这个思路理一理。

CSS Sprites可减少HTTP请求？

通过Firefox的Firebug可以看出，每一张图片，浏览器终端都会向服务器发出一个GET请求，对于图片很多的网站，会增加HTTP的请求，无疑降低了网站的性能，如果能使用CSS Sprites降低图片的数量，带来的好处将是网站性能的提升。

CSS Sprites是怎样降低图片的数量的？

CSS Sprites直译过来就是CSS精灵，这种翻译显然是不够的，通常我们把它叫做CSS图像拼合技术，当然还有人把CSS Sprites叫做”CSS贴图定位”，无论怎么叫，它的技术核心是不变的，其实就是通过将多个图片融合到一幅图里面，然后通过CSS的一些技术布局到网页上，主要是通过CSS属性background-image组合background-repeat，background-position等来实现的，通过控制相关属性及其参数，选择性地显示图片的部分内容。当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了HTTP请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。

优点

1）利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；　　

2）CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和；　　

3）解决了网页设计师在图片命名上的困扰， 只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率；　　

4）更换风格方便，只需要在一张或少张图片上修改图片的 颜色或样式，整个网页的风格就可以改变。维护起来更加方便；

缺点

可维护性差，CSS Sprite大多使用于较固定的像素定位中，它的弹性较差，收到定位等因素的制约，在图片的定位上也是个麻烦事。

1）在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止 板块内不会出现不必要的背景；

2）最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；　　 

3）CSSSprites在开发的时候比较麻烦，你要通过Photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁 琐；

4）CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原 来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css；

例子

使用CSS Sprites的一个例子

http://www.cnblogs.com/scgw/archive/2011/03/19/1988908.html

总结

秉着性能压倒一切的原则，CSS Sprites是值得推广的一种技术，尤其适宜用于FIR，比如固定大小的icon替换；

为保持兼容性，图片中的各个部分保持一定的距离是一种不错的做法；

需要在可维护性vs降低负载之间权衡利弊，选择最适合你的项目的方式；

工具

推荐 CssGaga^[3]，一款自动化网页设计工具集合软件，其中包含了你说的css spite(即工具AutoSprite功能)。此工具由web前端工程师@ytzong开发，现已通过多位腾讯系web前端工程师长时间的考察试用，软件随时更新升级，品质有保障。

CSS Sprites在线制作平台

http://csssprites.com/

参考地址：

[1]:https://developer.yahoo.com/performance/rules.html

[2]:http://my.oschina.net/areawen2os/blog/599052

[3]:http://www.99css.com/cssgaga/