CSS On/Images Off

Following on from yesterday’s logo placement discussion — a few people quite rightly mentioned the simplicity of placing the logo using an IMG tag within H1 tags. There’s no doubt there’s a lot to be said for this method, and there’s a good reason why it is the current standard. However it might be worth noting that it may not be quite a robust as you may think.

Take the ‘CSS On /Images Off’ situation that many low-bandwidth users prefer. As a developer sitting on the end of a cable, it’s easy to scoff at this scenario, but if you’re:

1. Paying a premium rate to browse through your web phone, or
2. Living in an area where you don’t have effective access to broadband

— it’s not such a radical prospect. In fact, I seem to remember even Roger Johannson Johansson of 456 Berea St mentioning recently that he still only has access to dial-up in his area.

It’s fair to say that both current versions of Firefox and Opera do a great job at scaling and even coloring the ALT text to the H1’s styling if you block the images.

However, IE renders a nasty looking ‘missing graphic’ icon and super-imposes the ALT text in barely legible 10px type. Certainly not ideal, but perhaps tolerable.

Safari was the real eye-opener though. As you can see in the screenshot, disabling images removes them but Safari neglects to leave any evidence — ALT text or otherwise — that there was ever an image intended for the area.

Perhaps there’s an alternate method for switching off images in Safari that I’m not aware of? I must admit it’s not my default browser, so I don’t know it inside and out.

But if not, that’s not a great result and something to be aware of.