ASP.NET 3.5 C# : Combine images in one download

Question

I Would like to know if its possible to combine mulitple images in 1 download. On my homepage I'm showing 12 images which change depending on the country of the user.

I notice this takes a lot of time to download for some users and i would like to know if it's possible to combine them into one download with an httphandler (in the way u can combina js and css) or even create 1 static image out of those 12.

For an example check here

Answer 1

I think you can make pretty good use of CSS Sprites in this case. They're HTML/CSS, so not ASP.Net specific in any way.

The overall concept is instead of many images, you use one large image, to eliminate the multiple round-trips to the server to fetch images. Then what you're doing is showing only a portion of the larger image where needed (as a background to the element), so in your <a>s you'd have something like this for styling:

.channel { 
  background: #FFFFFF url(SpriteMapUS.jpg); 
  width: 85px; 
  height: 55px; 
  display: block; /* Make the anchor render like a div, no more <img> tag */
}

Then on a particular channel, something like this:

.bloomberg { background-position: 0 0; }
.abcnews { background-position: -85px 0; }
.nasa { background-position: 0 -55px; }
.nasdaq { background-position: -85px -55px; }
//etc for the others...

And a channel would look like this:

<a href="..." class="channel abcnews"></a>

Read the article I linked for a full run-down, but those are the overall concepts for sprite maps.