CSS rollovers are widely used these days, and you can make some great looking "image" based navigation while still having it degrade gracefully. For example, you might have a navigation bar like you see at the top of this page. There are 7 navigation items, each with a rollover state and "break" line. That is a total of 15 separate images, which means the browser has to make 15 separate requests to the server (each with probably a couple of hundred milliseconds return trip).

I've made a test page with separate images, which totals to around 29.8kb worth of images (15 in total).

Now, the much underused technique that can work wonders, is combining all of these into a single image, something like this:



This new image, containing  all 15 of the original images rolled into one is now only 6.29kb That is savings of almost 80%, and the huge benefit of this is only a single image and return http request is needed to the server.

To position this, you do much the same as you would normally, however you simply use negative positions for the same effects. e.g.

background: url("images/navbar.gif") 0px -29px;

Here is test page number 2, using this method. Go ahead, give it a try on your next website, it makes a huge difference!