很少有大型图像与许多小图像相比

Question

我一直认为，当被迫在网站中使用图像时，最好尽可能使用最小的图像。但是，如果这意味着使用几个小图像来获得与一个大图像相同的结果，我不确定这是否因为发出更多HTTP请求而不好。

在这种情况下，最好的方法是什么？

• 很少有大型图片=要下载的较大文件
• 许多小图片=要下载的小文件，但有许多HTTP请求

当我说“很多”时，我只是指4或5而不是一张大图。

谢谢！

---

更新

只是为了让您知道我所说的文件大小的差异。在我今天遇到的一个案例中：

• 使用one large image = 1 request @ 11.3KB
• 使用五张小图片= 5张请求@ 1.2KB（总计）

Answer 1

我建议使用1张大图片而不是几张较小的图片。

总大小（以字节为单位）将是（大致）相同或不使用1个大文件或几个较小文件。但正如您已经指出的那样，您正在进行更多的HTTP握手，这会减慢速度。

对于我工作的多个网站，我们尝试将多个相同的图像文件组合成一个图像文件，只是为了减少HTTP握手。

Answer 2

正如EricLaw在Johan的回答中指出的那样;另一个解决方案是将较小的图像组合成一个图像，然后您可以使用CSS Sprites进行操作。该解决方案具有以下优点：

• 减少了HTTP请求的数量（因为您只是请求一个 图像）
• 允许缓存以便在不同背景下重用（如指出的那样） 在Curt的回答中）

Answer 3

我建议使用许多小图片而不是一张大图片。

这样做的原因是，如果在一个页面上，您有一个带圆角的内容背景，并且它全部作为一个图像完成，这将比具有相同效果的多个HTTP请求更好。

但是，如果在另一个页面上，您有类似的内容背景，那么它们必须是另一个大图像。

如果将第一个背景分解为多个图像，则第二个背景可能会使用其中一些图像，从而节省了多个HTTP请求。例如，如果两个图像都有圆角，则第二个页面可以使用相同的圆角，而只是主要内容区域的新图像。