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

Question

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

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

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

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

Answer 1

不，它们不需要时间来渲染(除非你的电脑真的很慢)。需要时间的是检索大量小文件。当您向 Web 服务器查询一个小文件时，检索文件本身的时间不会花费很长时间。但是要设置连接等等等等。

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

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

这里

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