很少的大图像与许多小图像
我一直认为，当被迫在网站中使用图像时，最好使用尽可能小的图像。然而，如果这意味着使用多个小图像来获得与一张大图像相同的结果，我不确定这是否也不好，因为会发出更多的 HTTP 请求。
在这种情况下最好的方法是什么？
- 少量大图像 = 要下载的较大文件
- 许多小图像 = 要下载的小文件，但有许多 HTTP 请求
当我说“很多”时，我指的是 4 或 5 个，而不是一张大图像。
谢谢！
更新
只是为了让您了解我所说的文件大小的差异。我今天遇到的一种情况：
- 使用一张大图像 = 1 个请求 @ 11.3KB
- 使用五个小图像 = 5 个请求 @ 1.2KB（总计）
I have always thought that it is best, when forced to use images in websites, to use the smallest images as possible. However, if that means using several small images to get the same result as one large image, I am unsure if this is then also not good because of making more HTTP requests.
What is the best approach in this case?
- Few large images = larger files to download
- Many small images = small files to download but many HTTP requests
When I say "many", I just mean 4 or 5 as opposed to the one large image.
Thanks!
UPDATE
Just to let you know the difference in file size that I am talking about. In one case that I have come across today:
- Using the one large image = 1 request @ 11.3KB
- Using five small images = 5 requests @ 1.2KB (total)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我建议使用一张大图像而不是几张小图像。
无论您是否使用 1 个大文件或几个较小的文件，总大小（以字节为单位）将（大致）相同。但正如您已经指出的那样，您正在进行更多的 HTTP 握手，这会减慢速度。
对于我工作的多个网站，我们尝试将多个同类图像合并为 1 个图像文件，只是为了减少 HTTP 握手。
I would advise using 1 big image instead of several smaller ones.
The total size (in bytes) is gonna be (roughly) the same wether or not you use 1 big file or several smaller ones. But as you already pointed out, you're making more HTTP handshakes which will slow things down.
For multiple websites I work on, we try to combine multiple same-kinded images into 1 image file, just to cut back on HTTP Handshakes.
正如 EricLaw 在 Johan 的回答中指出的那样；另一种解决方案是将较小的图像组合成一个图像，然后您可以使用 CSS Sprites 对其进行操作。该解决方案具有以下优点：
图像）
在柯特的回答中）
As EricLaw points out in Johan's answer; another solution would be to combine the smaller images into one image which you can then manipulate with CSS Sprites. This solution has the following benifits:
image)
in Curt's answer)
我建议使用许多小图像而不是一张大图像。
这样做的原因是，如果在一个页面上有一个带圆角的内容背景，并且全部作为一张图像完成，这将比使用多个 HTTP 请求获得相同的效果更好。
但是，如果在另一个页面上，您有类似的内容背景，那么它们将必须是另一个大图像。
如果第一个背景被分解为多个图像，则第二个背景可能能够使用其中一些图像，从而节省多个 HTTP 请求。例如，如果两个图像都有圆角，则第二页可以使用相同的圆角，并且仅将新图像用于主要内容区域。
I would recommend using many small images rather than one large image.
The reason for this is that if, on one page, you have a content background with rounded corners, and its all done as one image that will be better than having multiple HTTP requests for the same effect.
However, if on another page, you have a similar content background, then theyre will have to be another large image.
If the first background was broken down into multiple images, theres a chance the 2nd background may be able to use some of these images, saving multiple HTTP requests. For example, if both images have rounded corners, the second page could use the same rounded corners, and just a new image for the main content area.