Custom logos and exotic heading fonts… two things that as designers we’re in love with when it comes to website aesthetics. That’s where image replacement techniques come into the picture but when it comes to maintainability, accessibility, and search engine optimization (SEO) they can quickly become problems if not dealt with properly. In this post I’ll talk about what needs to be considered and describe the technique I use the most.

A Bit About Image Replacement

Image replacement (IR) put simply refers to instances where we use graphic images in the place of text. This can be the case with company logos but is also common with custom or rare fonts being a part of our design. The collection of “web safe” fonts available is small at best so the dilemma as to how to bring the more exotic fonts into our site is an ubiquitous one.  There are a few techniques for making non web-safe fonts accessible involving Flash(sIFR) or Javascript, and Google has been developing an interesting idea with their web font collection concept, but still one of the easiest solutions remains rendering them into a graphic image and then displaying the graphic on our page. When we do this though, we introduce a series of other problems.

The Issues at Hand

The first issue is maintainability. We need to keep our site-wide visual resources such as logos and headings easily modifiable and separated from the site content, so we use CSS to present these elements. That’s all well and good, but now that we’ve stripped the images out of the document body itself and into the CSS file, we can’t use the title attribute which is intended to help tell screen readers for the visually impaired and browsers with images disabled (or that just plain can’t find them) what is being said. Lastly, since the text that is in our images is not contained in the html itself, it is not visible to search engine crawlers and thus can’t be indexed.

Smart image replacement techniques intend to rectify this conundrum by finding ways to bring the text back into the html document itself in a way that will be visible to screen readers, browsers with CSS and/or images disabled, and most importantly search engines.

There Are Lots of Techniques!

Yes, the choices are many but honestly none of them are perfect. Each has it’s pros and cons, and it’s up to us to decide which one is best in each situation. Much has been written concerning the various techniques, and there are some good articles out there that size them all up side by side. If you’re interested in studying them all I would suggest Nine Techniques For CSS Image Replacement which gives an excellent summary and comparison as well as further links if you want to dig even deeper into the subject. Here in this post I’ll present the one that I feel works best for most of my projects (although I do use others from time to time… it’s all a matter of doing what’s best for the situation!)

My Favorite of the Bunch: The Gilder / Levin Method

This is the one I use the most, and in fact is in use on this site right now up there where the GAWD logo is. It’s named after the two credited with devising the technique, Tom Gilder and Levin Alexander. Let’s get to the nitty gritty and take a look at how it works. First the CSS:

[codesyntax lang=”css”]

.logo {
	position:relative;
	width:324px;
	height:73px;
}
.logo span {
	background:url('images/logo-img.jpg');
	position:absolute;
	width:100%;
	height:100%;
}

[/codesyntax]

And here’s the HTML:

[codesyntax lang=”html4strict”]

<div class="logo">
	<span></span>Golden Apple Web Design
	</div>

[/codesyntax]

Here’s what’s going on in the code: We’ve created a CSS class (.logo) for our image, but instead of displaying the image in this class, we  create a span specific to the class (.logo span) where we put the actual image. In the HTML the span is nested inside the .logo element and absolutely placed so as to keep it from being bumped out of the way by the text which we place in the same element. In effect the image sits on top of the text because the absolutely positioned span defaults to the top left of it’s parent container. Remember also that the parent element must have position itself for the nested span to position itself correctly. (More on the css position attribute in a coming post!)

The Pros and Cons

The pro’s to this method are that we keep our image in the CSS file, allowing us to quickly and easily make sight wide changes to it if and when necessary (and keeps content separate from presentation), and the text is right there in the HTML document to be read by search engine crawlers and screen readers… and would actually be visible if images or CSS are disabled.

The big con to this method is that we can’t use images with transparency as we would see the text underneath. Another is that we have to use an empty span element in our mark-up which angers semantic purists… Since I am not one of them, it doesn’t bother me that much since it has no negative effect on the functionality or aesthetic of the site. When either of these is an issue for the design at hand or for the client I find another method to use, but most of the time this one works smashingly!

Wrapping Up

So there’s my image replacement method of choice, and some background on why a bit of thought and effort should go into implementing IR wisely! I’ve only touched the tip of the iceberg here so if the concept interests you, look further into other techniques that are being used out there on the web so that you can make the best decision of which to use in each individual case… Happy coding!