首页 > CSS Sprite适合合并什么图片?

CSS Sprite适合合并什么图片?

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


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


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


通常当遇到一个网站要加载大量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.


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

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

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

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

PS:base64 IE6不认哦(fuck,我厂网站还有10%多的IE6用户)


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

【热门文章】
【热门文章】