很少有大图像与许多小图像

Lea*_*eah 5 image http httprequest page-load-time image-size

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

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

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

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

谢谢!


更新

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

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

Cur*_*urt 0

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

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

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

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