CSS Sprite 的细节优化
CSS Sprite 最大的好处是:减少 HTTP 链接数。
页面上的数据,通过 TCP/IP 包传输。在 1M ADSL 环境下,网速最大值为 128 Kb/s, MTU(Maximum
Transmission Unit) 的大小默认为 1500 bytes. 去掉 TCP/IP 的头部信息 40 bytes, 一个 package 可以容纳的文件大小为 1460 bytes. 下面是一张示意图:

需要的包越少,意味着速度越快。
例子:淘宝首页有一张 sprite: hd_20090313.png, 大小为 5.71 KB (5848 bytes). 需要 5 个包来传输(5848 / 1460 = 4.005)。看数据,只多出了 8 bytes. 优化到 5840 bytes 后,就可以减少一个传输包。
也许吹毛求疵了,但对于关键页面,任何细节优化,有时都是值得的。
类似的,对于页面中的链接数量,也可以考虑浏览器的最大并发数来做细节优化。比如,在 Firefox 下,同一个 host 的最大并发数为 6, 增加链接数对下载时间的影响如下:

当链接数从 6 的整数倍增 1 时,下载时间明显增大。考虑 IE6 最大并发数是 2, 减少链接数时,尽量减少到偶数,是一个不错的优化守则。
参考资料
- CSS Sprites: Image Slicing’s Kiss of Death
- CSS, Image Sprites, Background Images and Website Optimization
PS: 出一道题目考考大家:CSS Sprite 的缺点是什么?

July 29th, 2009 on 13:29
图片的下载不能并发了?
July 29th, 2009 on 13:29
缺点应该就是维护起来麻烦了吧
July 29th, 2009 on 13:30
CSS Sprite 在ie6下面可能会出现Background Flicker问题,嘿嘿。另外维护不方便
July 29th, 2009 on 13:41
1. 维护性降低
2. 不好使用center属性
3. 盒子大小需要限制。
July 29th, 2009 on 13:43
另外还要注意尺寸,图片尺寸大了会很吃内存可以参考这篇文章
http://blog.vlad1.com/2009/06/22/to-sprite-or-not-to-sprite/
July 29th, 2009 on 13:59
还有个缺点是内存占用大
July 29th, 2009 on 14:26
答题:
主要是当一张大图集成的小图数量越来越多的时候:
1、一张图中用不上的部分可能会越来越多。
2、加入小图(或调整小图尺寸)的难度会越来越大,牵一发而动全身。
3、小图越来越多,则调色板会越来越大,最终导致256色图变成24位色图,文件体积爆增。
不过这貌似也不能算缺点?这本身就是一个权衡的过程和折衷的结果。
July 29th, 2009 on 14:28
@wlsy 貌似不用 CSS Sprite 才会在 IE6 下出现背景图hover闪烁?
July 29th, 2009 on 15:05
@birdstudio 抱歉我说的不太严谨,这个不完全是CSS Sprite的缺点, 这是IE6的背景闪烁问题:-)
July 29th, 2009 on 15:37
首次加载延迟和维护性
July 29th, 2009 on 15:42
这只是细节优化的一部分, 只是优化大小. 放出 各浏览器处理 CSS Sprite 所占用的时间和内存等吧… 我知道你有的.
July 29th, 2009 on 17:10
最近后看到文章说内存占用会显著加大。
同时等待“各浏览器处理 CSS Sprite 所占用的时间和内存”
July 29th, 2009 on 17:16
同上问其实。
July 29th, 2009 on 20:11
还有个缺点是不能用background-repeat … (其实也可以,但只能拼合同样宽度或同样长度的图片)
July 29th, 2009 on 22:11
博主,看了你很多博文对我帮助很大,谢谢你的分享! 有没有空看看这个联动菜单 http://www.1netmedia.net/base/attachments/month_200708/PCASClass.html
的实现,分析一下它的数据压缩方式?
July 30th, 2009 on 0:12
好像也没办法把一个合并后指定的图标,放到盒子的右边/下边吧? background: … right bottom;
July 30th, 2009 on 0:54
不能使用center吧
July 30th, 2009 on 10:29
一直不明白为什么有2个人总提到不能使用center这个问题!!
July 30th, 2009 on 10:49
ping -f -l 1472 192.168.1.1
内网头是28字节
外网头是40字节?
July 30th, 2009 on 10:52
维护起来也是很容易的,直接改图就是了。
除非要改变图片的大小和位置,那样可能稍微麻烦些。但是相比较节省下来的资源,还是值得的。
July 30th, 2009 on 12:43
@Max 应该就是让背景图居中,跟放到右边或底部的问题一样。除非用一个独立的图片或者限制盒子的大小。
see: http://www.xianyun.org/labs/browser/upgrad-your-browser.html
July 31st, 2009 on 9:12
CSS雪碧的坏处是不能在KFC买到
July 31st, 2009 on 12:59
想不到还可以从ADSL 的 MTU 出发进行优化,还可以带来可观的收益
July 31st, 2009 on 14:29
sprite在web performance方面确实可以起到立竿见影的效果。
但这是以增加维护成本作代价的。
另外,很多网站都会对图片资源做cache。因此一旦你修改了sprite图片的话,那么记得在扩展名后加一个随机数字,避免浏览器显示被cache的版本。
July 31st, 2009 on 17:52
有国外专家(eric meyer?)说会增大内存
另外会导致不必要的图片引入
August 4th, 2009 on 17:57
准确地说在HTTP1.1下浏览器连接数:
Firefox 2: 2
Firefox 3: 6
Opera 9.26: 4
Opera 9.5 beta: 4
Safari 3.0.4 Mac/Windows: 4
IE 7: 2
IE 8: 6
Chrome 3.0:4
在HTTP1.0下,FF连接数是8。CSS Sprite 内存使用量,可见这个页面:
http://ajaxian.com/archives/sprite-me-helping-you-sprite-up-but-maybe-you-shouldnt
September 17th, 2009 on 11:01
图表是用什么工具画的?
September 17th, 2009 on 12:19
@hacker: MS Excel
August 31st, 2010 on 18:11
淘宝首页今天在更新吗?上午还看到mhtml实现的小图标,现在又变成CSS Sprites了。
leave a reply