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 回答