Image tag vs. Image replacement
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:
- For design elements use background images
- If your image represents a design element such as a rounded corner, it has no semantic value and should have no impact on the actual content of the page. For implementations such as these, background images are the best.
- For products, brands and other tangible elements, use the image tag
- If your image represents a product, then it’s a quantitative part of your content and should therefore be represented semantically with an image tag. Take for example these sites. If you view the pages without stylesheets you’ll see that only the products themselves use the image tag. Everything else is rendered using the
background-imageCSS property. Likewise, this site‘s brand is preserved by the use of an image tag. - When styling content, use an image replacement technique
- In the case where you’ve got actual content that needs styling, such as a headline that needs to be in a specific typeface, then use one of the many available image replacement techniques.
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?