What's a "Sprite map?"

Here's a great website development tip to improve SEO visibility and website load-time.

I'm sure you've heard of a site map and its value for SEO, but a sprite map is completely different. When you put an image in a web page, the browser downloads the image as a separate HTTP request. That means, every image is another HTTP request. For example, if the site's main navigation has six links, each with a rollover image, that's 12 HTTP requests (not to mention the initial request for the page).

Each HTTP request for an image file is about 50 bytes in size. If you compile all your most used images into one big image file (a "sprite map"), you condense those 12 HTTP requests down into 1 HTTP request. More importantly, you save all of the file size overhead for 12 different files and HTTP requests for each. Using a little CSS you can simply display the appropriate part of the sprite map at the appropriate time and place.

There is an added bonus to sprite maps—less markup (or code). More and more search engines look favorably on a high ratio of text to code. Using sprite maps instead of hundreds of lines of JavaScript rollovers and tons of wasted space calling each image separately means a fast-loading, well indexed web page with all the functionality of before.

There's tons more marketing tips where that came from.