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)
- 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.
- The browser only downloads as many single images as are needed
- 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.