4

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

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

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

当我说“很多”时，我的意思是 4 或 5 个，而不是一张大图。

谢谢！

更新

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

  • 使用一张大图 = 1 个请求 @ 11.3KB
  • 使用 5 个小图像 = 5 个请求 @ 1.2KB（总计）
4

3 回答 3

4

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

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

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

于 2011-07-27T10:48:47.160 回答
1

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

  • 减少了 HTTP 请求的数量（因为您只请求一个图像）
  • 允许缓存以在不同背景下重复使用（如 Curt 的回答中所指出的）
于 2013-01-04T11:53:29.760 回答
0

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

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

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

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

于 2011-07-27T13:17:28.850 回答