PNG图像会减慢HTML渲染速度吗？

Question

3

我在一个网站模板中使用了几个PNG图片（通过CSS），使用的是xhtml和CSS。

我已经尽可能地使png文件变小并进行了优化，但在任何浏览器中测试时（Safari、Firefox、IEs），至少需要2秒才能渲染出来。

不幸的是，我不能在这里分享代码，但我可以说我已经删除了所有JavaScript，并且我的HTML代码非常简单（大约250行，没有表格）并且正确验证。

我想知道PNG是否是“罪魁祸首”，因为这是我第一个几乎完全使用PNG（而不是gif + jpeg）的网站（我不支持IE6，所以不需要hack）。

- jackJoe

我首先会检查几件事情：尝试在不同的浏览器中打开并检查是否出现相同的行为。检查服务器是否以不同的方式呈现PNG，例如在不需要时进行gzip压缩。尝试直接将PNG放在图像标签中，而不是通过CSS背景加载。 - Shadow The Spring Wizard

你加载了多少个PNG文件？你使用CSS精灵吗？ - Pascal Qyy

是的，我正在使用CSS精灵，但这也可以进行优化，即使如此，我通过CSS使用了大约11个PNG文件，它们的大小不到40Kb；我在几个浏览器中进行了测试，并且我忘记提到这是在一个简单的测试中，没有服务器，只是测试一个HTML页面。 - jackJoe

编辑：看起来它确实加载了超过11个PNG :( 它平均加载了44个图像（混合CSS和HTML上的图像），可能是我的电脑需要退休了，但至少我已经“启发”了PNG本身不会减速，而是（可能）由于请求数量，谢谢。 - jackJoe

3个回答

5

不，它们不需要渲染时间（除非您的计算机非常慢）。需要时间的是检索许多小文件。当您查询一个Web服务器以获取小文件时，检索文件本身所需的时间并不长。但是设置连接等等会累加起来。

因此，您应该做的是制作所谓的“精灵图”。将所有小图像组合成一个大图像，并使用CSS“切割”它们。如何完成以及它是什么，可以在此处解释：

和这里

- Lasse Espeholt

1

请查看此链接。在“优化图像”选项卡下阅读。

希望这是你需要的东西。

- Saurabh Gokhale

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oded · Accepted Answer

如果您有很多图像（不一定是PNG格式），那么下载时间将受到影响。默认情况下，浏览器有限制的线程数用于下载内容（我记得Firefox有4个线程），因此您拥有的图片越多，事情就会花费更长的时间。

此外，如果您没有在图像上指定尺寸，那么浏览器只有在图像到达时才能正确布局页面。它需要为每个这样的图像重新排列布局，这既耗费资源又耗时。

简而言之，请确保您没有太多要下载的图像，并且HTML标记具有正确的尺寸。

对于拥有许多图像的情况，一种解决方法是使用CSS sprites。