Few large images versus many small images

Question

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)

Answer 1

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.