« Catch Joe C’s Latest on NFB, Target, Amazon
The User and the Damage Done »

“I have a quick question about image rollovers in the navigation”

Q: Is it better to use 2 images, or 1 image with a changing background position? In the past I’ve always used the second one, but I’m not sure how browser compatible it is…

A: It depends… There is no browser incompatibility since it is a simple CSS style, but I favor separate images for three reasons (below)

  1. You could have file-size issues when optimizing. Putting the off/on states together makes one file that much larger – plus, at the “dividing line� where the two button states meet there is a potential negative impact yet again (if you’re making a JPG). If you’re optimizing a GIF, you could be doubling the amount of colors in the image. Lastly, the browser downloads all the image file size for both states in every instance which leads me to point two.
  2. The browser only downloads as many single images as are needed
  3. Making and optimizing the off/on states of the nav at the time of design in the PSD takes more time to combine when it’s not traditionally (here) laid out that way.

One flip side is that, if you make separate images, there are twice as many images on the server to manage.

FYI, when styling the CSS selectors, there is no advantage either way.

This entry was posted on Monday, April 30th, 2007 at 2:41 pm and is filed under Markup. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to ““I have a quick question about image rollovers in the navigation””

  1. Nate Klaiber says:
    April 30, 2007 at 3:34 pm

    I tend to favor the navigation matrix versus separate images. I think it will always depend on the need (some matrices could get quite large). I don’t think it is as much of an issue with filesize as it is request to the server. You can eliminate the multiple requests, and if you use one matrix you can eliminate the flash of content that you get with 2 images (mostly found in IE). This is due to the fact that it doesn’t preload the images, so the over state is loaded on hover. With the matrix, the image has already been loaded – you are simply changing its position.

    I think it helps managing both your files and your CSS, as you don’t have to have multiple instances of both on the fileserver or CSS file. Not to mention editing/working with other designers makes it easier as you are just editing one file and exporting one file

    Personally, I would use PNG versus GIF – but that is a personal preference (The support for IE is hindered when you want to use alpha transparency, but there are even fixes for that).

Leave a Reply