Sprite / PNG图形重的网站，哦，我的！

Question

我需要创建一个图形密集的网站（撕裂的纸张背景，纹理图形上有透明阴影等）。我想要节省文件大小的一种方法是将所有背景元素放入一个PNG 。问题是这个文件现在是180k。如果我把它分解成各种GIF和几个PNG，那么它将接近70k。

真的重要吗？这些天文件大小“太大”的是什么？有人会注意到文件是180还是70k？

Answer 1

如果您的用户可以快速访问您的网站（例如，在Intranet中），那么180k几乎不是问题。另一方面，如果该站点由具有幽默缓慢连接的通用老人使用，则可能会出现问题。如果您的用户使用GPRS，但有耐心，可能不会有问题。如果该网站向有耐心等待加载时间的人提供一百万美元，则传输速度不是问题。等等。

我在说什么，这实际上取决于你的要求和约束。这要求你知道（然后告诉我们，让我们更有帮助）许多事情，然后才能使它接近正确。

为了避免那些令人讨厌的非常有效的答案 - 但是 - 根本不是取悦某人，这是我的回答：

180k除以标准ADSL调制解调器传输速率= 180kB / 100kB / s = 1.8s =耐用。

Answer 2

是否有理由使用较小的图片？听起来你已经打破了它，为什么不采用更小，更快的方法？

从纯粹的相对论观点来看，70k将只占到180k（约）的下载时间的38％。如果您期望高流量或想要快速加载时间，那么每一点都有帮助。

Answer 3

您必须比较请求所有单独图像所需的时间以及下载一个大图像所需的时间。问题出在HTTP请求上。

我建议您使用Google的Firefox扩展程序Pagespeed进行一些测试，以查看大png或单独的png之间是否存在巨大差异。

我能想到的一个好处是，除了更少的HTTP请求之外，您的网站将一次性加载所有图形，而不是逐渐加载所有图形。然而，正如Henrik所说，这取决于你的要求。

Answer 4

我确信你知道拆分成多个图像意味着与服务器的额外连接以检索它们，每个连接都有相关的延迟，以及请求和响应标头的额外大小。

由于浏览器限制了每个服务器的活动连接数（取决于浏览器版本），因此最终可能需要比检索单个图像更长的时间。解除限制的常用解决方法是使用单独的“映像”服务器或映射到同一主机的DNS别名。

除非你需要动画，否则我总是建议使用PNG而不是GIF。

Answer 5

确保网站看起来很好，首先禁用图像（因此设置了alt标记，设置了宽度和高度，使用了正确的颜色），然后将图像分成几组。如果可能，将所有按钮分组为一个图像（使用css精灵表），将所有边框分组到另一个图像中。将大图像保存在单独的文件中（因此网站背景，标题）。

您拥有的图像越多，浏览器就可以对请求进行并行化。但是，如果你将它们分得太多，那么不同的图像会在不同的时间加载，使网站的某些部分进入。这是一个折衷，但这是编程的乐趣：）

在图像可见之前，您的网站看起来越好，用户就越不会介意下载图像的速度。