One of the most regularly recurring questions that I have to answer when building a site is: “should I use an image tag here, or a CSS image replacement?” This is especially the case when working with a design that’s been given to me by a graphic designer, because I’m not the one who thought out the design. When I work on a design from the beginning, I approach it with the mindset of a web developer. I consider what elements will be lists, what will be headings, etc. Even while working on a purely graphical design. That’s both good and bad. Good because I can foresee and circumvent potential implementation pitfalls. Bad because of its limiting factor on creativity.
In the past, “image tag or not” wasn’t even an issue. You wanted an image, you used an image tag. But now, with Web Standards and a focus on semantics, I have to carefully consider the meaning of every element that goes into the page. So, in order too answer one question, I need to ask another: “what does this image represent?” Is it a product? A brand? A design element like a rounded corner? Or a particularly nice font that you can’t get without using an image?
When trying to decide whether to use an image tag or not, ask yourself: “what does this image represent?”
Depending on your answer, you’ve got three possible options:
background-imageCSS property. Likewise, this site‘s brand is preserved by the use of an image tag.
All of this really amounts to using the right tool for the right job. And in the end, isn’t that what web standards are all about?
Read more from the archive.