一起CSS

图片对网站速度的测试

日期：2008-07-25 分类：未分类

一次偶然，用Firebug看到腾讯将许多小图标、小图片合在一张大图上（点击这里查看），当时觉得很奇怪，因为按照传统，我们会将那些小图标、小图片切分成一个一个小的图片。想来想去，我觉得可能更网站速度有关。后来又陆续见到这样的例子，我就越来越肯定这个观点了。

但到底是不是上面所说的那样呢？我一直没时间证实，今天我们就来测试一下这样做对网站速度到底有怎样的影响。我们拿一张图片（见下图），测试网页加载这一整张图片快还是把它切分成14（14个栏目）个小图片快。

测试条件/环境：

1、图片：以我目前正在做的一个网页的导航背景图片吧；点击这里查看

2、网页：针对上面的背景图片我写了3个不同的网页，分别是：测试文档a、测试文档b、测试文档c，其中测试文档a用的是14个小图片，测试文档b和测试文档c是用一整张图片；

3、服务器：以本人目前在职公司的服务器；

4、测试工具：Firebug；

5、测试次数：10次/网页。

测试结果：

从上面的结果可以看出，用一整张图片的网页加载速度明显要比用14张小图片的网页快。从结果图片可以看到：用14张小图片的网页有15个http请求，而用一整张图片的网页只有2个http请求。除去共同要加载的HTML文档，用14张小图片网页的http请求与用一整张图片网页的http请求比是14：1。并且14张小图片的总大小是23.7K，一整张图片的大小是8.66K。从这里可以明显看出用一整张图片的优势。

当然，这肯定不适用于所有情况。比如直接用1000*1000的图片那肯定不行了。

测试过程中肯定或多或少受到一些客观因素的影响（如网速/虚拟内存等等），所以结果只供参考。

查看：643 评论：4