PNG图像会减慢html的渲染速度吗？答案

【问题标题】：Do PNG images slow down the render of an html?PNG图像会减慢html的渲染速度吗？
【发布时间】：2011-03-06 20:43:48
【问题描述】：

我在网站的模板、xhtml 和 CSS 中使用了几个 PNG 图像（通过 CSS）。

我已将 png 尽可能小并进行了优化，但在任何浏览器（Safari、Firefox、IE）中对其进行测试时，渲染至少需要 2 秒。

很遗憾，我不能在这里分享代码，但我可以说我已经删除了所有的 javascript，而且我的 html 代码相当小（大约 250 行，没有表格）并且可以正确验证。

我想知道 PNG 是否是“有罪”的部分，因为这是我第一个几乎完全使用 png（而不是 gifs + jpegs）完成的网站（我不支持 IE6，所以不需要 hack）。

【问题讨论】：

我会先检查几件事：在不同的浏览器中尝试并检查您是否看到相同的行为。检查服务器是否以不同的方式呈现 PNG，例如在不需要的时候进行 gzip 压缩。尝试将PNG 直接放在图片标签中，而不是通过 CSS 背景加载。
你加载了多少个 PNG？你使用 CSS 精灵吗？
是的，我正在使用 CSS sprites，但它也可以优化，即便如此，我通过 CSS 使用了大约 11 个 png，这些文件占用不到 40Kb；我已经在几个浏览器中测试过了，我忘了说这是一个简单的测试，没有服务器，只是测试一个 html。
编辑：看来它确实加载了超过 11 个 png :( 它平均加载了 44 个图像（CSS 和 html 上的混合），它可能是我的电脑需要退休，但至少我对 PNG 并没有自己放慢速度，而是（可能）因为请求数量变慢而感到“清醒”，谢谢。

标签： html png

【解决方案1】：

不，它们不需要时间来渲染（除非您的计算机非常慢）。需要时间的是检索大量小文件。当您向 Web 服务器查询小文件时，检索文件本身的时间不会很长。但是设置连接等等等等。

所以，你应该做的是制作所谓的“精灵”。将所有小图像组合成一个大图像，并使用 CSS 将它们“剪切”。这里解释了它是如何完成的以及它到底是什么：

这里

【讨论】：

【解决方案2】：

如果您有很多图片（不一定是 PNG），则下载时间会受到影响。默认情况下，浏览器下载内容的线程数量有限（IIRC FF 有 4 个），因此您拥有的图像越多，所需的时间就越长。

此外，如果您未在图像上指定尺寸，则浏览器只能在图像到达时正确布局页面。它需要为每个这样的图像重排布局，这既昂贵又耗时。

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

拥有许多图像的一种解决方法是使用CSS sprites。

【讨论】：

【解决方案3】：

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

我希望这是你需要的东西。

【讨论】：