Few large images versus many small images

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 reque开发者_如何转开发sts.

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)

---

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.

---

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:

• reduced the number of HTTP requests (since you're only requesting one image)
• allows caching for reuse with different backgrounds (as pointed out in Curt's answer)

---

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.