CSS Sprite适合合并什么图片？

Question

我看一般用来合并小图标。是否可以合并一些图片，省去img标签？

Answer 1

通常当遇到一个网站要加载大量icon(小图标)的时候，我们会把它合并成sprite(图片拼接)。目的是为了减少HTTP请求次数。这样做既能减少页面加载时间，又可以减轻服务器的负载。楼主的问题是可不可以推而广之，把大量image(图片)，比如背景和首页slides图片，也合并成sprite，把对所有image的大量请求减少为1个对sprite的请求. 因为使用了压缩技术，sprite的大小要比每个image加起来小得多。这里有个问题，是否需要把这个sprite再转换成data-uri:base64, 并放到css里。google了一下“base64 vs css sprite”，Paul Irish 对此有一篇精彩的论述，他的结论是不需要转换，直接使用CSS sprite.

Answer 2

你在自问自答嘛，合并图片的话，大多是合并一些小的图标也就是icon，你可以看看新浪微博是怎么划分的， 不过有时候不光是小图标可以合并，大的图标也可以， 只要做好分组。

Answer 3

给你推荐两个网址 http://www.spritecow.com/ http://csssprites.com/

Answer 4

CSS sprite和DataURIs各有各的好，主要看实际情况 参考这篇blog：http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/

Answer 5

CSS Sprite适合合并多个无意义的图标，不适合图片。 img标签是有语义的，搜索引擎可以读的到，而Sprite提在css中，搜索引擎不会读，虽然用两种方式看起来展示效果是一样的。

其次，如果你网页里面存在图片的缩放操作，比如：

<img src="abc.png" style="width: 50%">

这个css sprite是搞不定的。（css3中的bg-size有类似效果，不过支持度不一样）

PS：base64 IE6不认哦（fuck，我厂网站还有10%多的IE6用户）