To reduce the unsightly flashes that happen when 2 images are used for control (button) states (hover, press) in a HTML page just put the images together in one file and use CSS to move the background image to the appropriate state location within the image. This method has been labeled CSS Sprites by web developers and is extremely effective for removing the flash. But what is even more important is it speeds up your site in several ways.

Code Example:

div#noflash {width:200px; height:30px; background:transparent url(../Images/BlackWhiteSprite.jpg) no-repeat top left; }

div#noflash:hover {background:transparent url(../Images/BlackWhiteSprite.jpg) no-repeat -200px 0px;}

The code above shows a white square that is 200px wide and 30px high by default. Once it is hovered over by a user’s mouse instead of loading a completely different image for the hover state we simply take the same image, already in cache, and we just move it to the right -200px to reveal the black portion of the image. That is all there is to it, you can move a background side to side, top to bottom and a mixture of both to get to any x/y location within the image.

You may think that many smaller files reduce your visitor’s wait for a page to load, but you are mistaken. Your individual image sizes may be really small but part of your image’s size is meta-data describing the image (size, type, etc.). This meta data adds bulk to every image you create. To test this for yourself you can take a folder full of images and examine its properties in windows by right clicking it. When the properties window opens record the size of the folders contents. Then take all those images and in your favorite image editor and combine them all into one large image by tiling them. Now examine the new image’s properties and you will find that the combined image’s size is 80-90% smaller than the folder containing all the individual images. This is because there is only one set of meta data for the one combination image, instead of a set for each individual image.

Of course this does not mean you should take all the images in your site and create one monolithic sprite image, that could end up being massive and would really slow down the loading of your pages. What it does mean is that you should take related images, such as button states, icons, etc. and create sets out of them. Then combine the related images in each set creating a single sprite image for each of the sets. This allows one image to be loaded by the browser, cached and then used for n+ images.

How else does this method improve your site’s performance? Glad you asked! It reduces the # of Http requests that have to be made by a client’s browser to get the content needed to display a page. Why does this matter? Each Http request is a round trip from the client’s computer to the server on which the web site lives. Each resource (css, javascript, html, Images, etc.) that makes up the web page requires an individual request. The more requests that are required to build the page the longer it takes.

Lets say that a request from your browser to this server takes an average of 39ms and there are 35 images used in this web page. Now excluding the variable lag created by different sized images which can affect the response time the total response time base off the average for all of those images to reach your browser is 1365ms. Now lets say that those 35 images could be combined into 6 related sets the response time is now 234ms almost 6 times shorter.

Now of course your image is bigger now that you combined them, but remember that the overall size by combining has been reduced. Smaller size less time. So not only did we reduce the overall sice of all the images that have to be sent across the internet but we also reduced the number of requests that have to be made. Your page just loaded faster! Your visitors are thanking you! Your traffic just increased! Your bandwidth useage just went down! Your hosting bill just decreased! All I see here are benefits…