How can we reduce the number of image requests, without actuallyremoving images?

Simple, join multiple image files and save as one image, thenuse CSS to make sure that the image displays properly.

Example 1: You have two separate background images. Image A andB. We can place the images either side by side or top tobottom.

Side by Side: AB

How to display image A: Display the image but limit the width towidth of image A. B will not show up.

How to display image B: Negative position the image so that itstarts at image B and limit the height and width.

The same concept applies to top to bottom.

How to display image A: Display image A by limiting theheight.

How to display image B: Display image B by setting the verticalalignment to bottom (y-position to 100%) or negative position the yposition and once again, limit the height to the height of imageb.

Now we can easily expand the above concept to include as manyimages as we want.

We can position all images along a vertical or horizontal strip,for simplistic css code. Or we can put the image in a grid-systemlike

ABC
DEF.

Simply position the image to start at the top-left corner of theimage you want, and limit the height and width to the size of saidimage.

Note: This technique can only be used for CSS and not for htmlimages.

The Original Image