Website Development

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.

I’m always compelled to see what’s happening on a web-related (industry) blog where the “F-bomb” gets dropped because you’re either going to find someone with no common sense to laugh at or someone with a pure passion for which they speak. If you’ve read Joe Clark, you know his passion for accessibility is no doubt there.

I’ve been trying not to yawn at the litigation regarding the Target case, so this read here is an interesting insight on what may be happening behind the scenes regarding the additional news of Amazon meeting minds with the National Federation of the Blind (NFB).

Enjoy.