我在网站的模板、xhtml 和 CSS 中使用了几个 PNG 图像（通过 CSS）。
我使 png 尽可能小，并尽可能优化，但是在任何浏览器（Safari、Firefox、IE）中测试它时，渲染至少需要 2 秒。
不幸的是，我不能在这里分享代码，但我可以说我已经删除了所有 javascript，并且我的 html 代码相当小（大约 250 行，没有表格）并且验证正确。
我想知道 PNG 是否是“有罪”的部分，因为这是我的第一个几乎完全使用 png（而不是 gif + jpegs）完成的网站（我不支持 IE6，因此不需要 hack）。
I'm using several PNG images (via CSS) into a site's template, xhtml and CSS,.
I've kept the pngs as small as possible, and optimised as possible, but when testing it in any browser (Safari, Firefox, IEs) it takes at least 2 seconds to render.
Unfortunately I can't share the code here, but I can say that I've removed all javascript and my html code is fairly small (about 250 lines and no tables) and validates correctly.
I would like to know if the PNGs are the "guilty" part as this is my first site done almost exclusively with pngs (instead of gifs + jpegs) (I won't support IE6 so no need for hacks).
发布评论
评论（3）
不，它们不需要时间来渲染（除非您的计算机非常慢）。真正需要时间的是检索大量小文件。当您向网络服务器查询小文件时，检索文件本身的时间并不长。但是设置连接等等都会增加。
所以，你应该做的是制作所谓的“精灵”。将所有小图像合并为一张大图像，并使用 CSS“剪切”它们。这里解释了它是如何完成的以及它到底是什么：
http://css-tricks.com/css -sprites/
和这里
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
No, they do not take time to render (unless you have a really slow computer). What does take time, is the retrieving of a lot of small files. When you query a web-server for a small file, the time retrieving the file itself does not take long. But to setup the connection etc. etc. adds up.
So, what you should do, is to make what is called a "sprite". Combine all the small images to one large and "cut" them with CSS. How it is done and what it is exactly is explained here:
http://css-tricks.com/css-sprites/
and here
http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
如果您有很多图像（不一定是 PNG），那么下载时间将会受到影响。默认情况下，浏览器下载内容的线程数量有限（IIRC FF 有 4 个），因此图像越多，所需的时间就越长。
此外，如果您没有指定图像尺寸，则浏览器只能在图像到达时正确布局页面。它需要为每个这样的图像重新布局，这既昂贵又耗时。
简而言之，确保您没有太多图像需要下载，并且 HTML 标记具有适合它们的尺寸。
拥有多个图像的一种解决方法是使用 CSS sprites。
If you have many images (doesn't have to be PNGs), then download times will be impacted. By default browsers have a limited number of threads to download content with (IIRC FF has 4), so the more images you have, the longer things will take.
Additionally, if you don't specify dimensions on your images, the browser can only correctly layout the page when an image arrives. It will need to reflow the layout for every such image, which is both expensive and time consuming.
In short, ensure you don't have too many images to download and that the HTML markup has the right dimensions for them.
One workaround for having many images is to use CSS sprites.
检查此链接。阅读“优化图像”选项卡下的内容。
我希望这是您需要的东西。
Check this link. Read under the "Optimize Images" tab.
I hope this was the thing you needed.