PNG图像是否会降低html的渲染速度？

Question

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

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

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

我想知道PNG是否是“有罪”部分，因为这是我的第一个网站几乎完全用pngs（而不是gifs + jpegs）完成（我不支持IE6，因此不需要黑客攻击）。< / p>

Answer 1

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

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

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

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

Answer 2

不，他们没有时间来渲染（除非你的计算机非常慢）。什么需要时间，是检索很多小文件。当您在Web服务器中查询小文件时，检索文件本身的时间不会很长。但是设置连接等等加起来。

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

http://css-tricks.com/css-sprites/

在这里

http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

Answer 3

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

• Best Practices for Speeding Up Your Web Site
• Speed up Images Load Time

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