CSS Sprites

CSS Sprites （网页小图片优化）

 

1.原理：

 

把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”,"background-repeat","background-position"的组合进行背景定位， background-position可以用数则精准的定位出背景图片的位置。

 

2.优点：

 

把小的背景图片集成到一张图片上面，浏览器对图片的请求次数就会减少（减少HTTP的连接数），会加快访问速度。而对于图片大小来说，小图片的集合也不会很大，只要集成的图片不超过100K,就还是比较OK的。

 

3.缺点：

 

至于维护性，这是一把双刃剑。每次图片改动都得忘这个图片删除或添加内容，显得繁琐。而且算图片的位置（尤其是这种上千px的图）也是件很不爽的事情。当然，在性能的口号下，这些都是可以克服的。

由于图片的位置需要固定为某个绝对数值，这就是去了诸如center之类的灵活性。在一些需要非单向的平铺背景和需要网页缩放的情况下，CSS sprites并不适合。

 

 

3.工具：

 

a. 在线工具：http://csssprites.com/

b. 客户端工具：http://www.w3cfuns.com/portal.php?mod=topic&topicid=60

c. ps插件：http://arnaumarch.com/en/sprites.html

4.总结：

谢谢！