My Latest Take on Image Replacement

As you can see, the new layout still sports image based headings for much of the reoccurring content around the site. I took my usual approach of marking up and styling in that I began with bare XHTML 1.0 Strict and then added the CSS after that was totally complete. As I got to the first image-based heading, I took some time to think about a better image replacement technique.

The Problems with Image Replacement

As you may know, image replacement can be a touchy subject. Your aim should be to develop something that is equally usable by each and every person that finds their way to a site you designed and/or developed. Including extra markup that isn’t semantic didn’t seem like a path I wanted to travel, so many of the “accepted” image replacement techniques were put aside. The remaining choices left little to be desired if your reader happened to be viewing a site with images disabled and CSS enabled.

“Who does that?” you may ask. If I were to take a guess, it could be someone who is fairly Web-savvy and has the ability to use their browser in that particular fashion because they’re at a relatives house and stuck on a choking dial-up connection. That’s just one of the possibilities, and I’m sure if we all put a few minutes into thinking about it, we could think of another situation in which we wanted to simply disable images only and get straight to the content.

An Idea was Born

As I thought about it, I went in a direction that others have gone before, in that the actual text wasn’t removed from display all together, it was merely camouflaged with the background. I stuck with that technique because removing the words from display as step one doesn’t let you get much further with images disabled.

The trouble with camouflaging the text is that most of the time, disabling images simply leaves the ‘invisible’ text on screen. The text proves to be useless to a reader unless they disable CSS as well. There had to be a better way.

And That’s When it Came to Me

It was at that point I began testing with a structured block element by giving a heading a specific height and width. I gave that element a background-color that contrasted with the color in order to make the text visible again. Once that was complete, everything else seemed to fall into place.

Since I had a block element with a height and width, I was able to cut out my desired image for replacement, and simply include it as the headings background-image. A crucial step, however, is to leave yourself enough real estate to work with when cutting out the image. What I mean by that is cutting out an extra couple dozen pixels at the top of the image, because that is where your text will reside. The next step is to give the heading a color that matches the background color of the site (in order for the text to camouflage). The last step is simply shrinking the font-size of the heading so that our content resides in the real estate we set aside.

To provide a visual example, here’s what results:

Image of mouse highlighting camouflaged text

You can recreate just that on any of the image based headings around the site. If you disable images, the black background appears and the text is now visible, albeit small. Go ahead and bump the font size up a couple notches, the technique survives it for a bit. I don’t think that many readers would feel the need to bump font size three or four levels, do you?

Obvious Limitations to the Technique

As with almost everything, there are certain limitations to using a technique such as this. First and foremost, it won’t really work with anything but a solid color background. Secondly, if a user were to increase their font size a few jumps, your text will begin to overlap the images you created and look like quite a big mess. Lastly, first time (and some repeat) readers will see that stark background color you gave your heading and it may take them by surprise. Once your CSS and images are cached the problem shouldn’t continue, but some people browse with their cache completely disabled. Something like this might prove to be annoying to readers such as those.

Another thing that could be considered a limitation is the extra space you have to leave at the top of every heading. Again, this was something that just fell into place with my design, I wanted the extra margin there as it was. This method of image replacement won’t be the end all for other techniques; it just seemed to fit my goal set quite nicely.

How do you Feel About the Technique?

So far, I’ve had some mixed reactions to the technique. Some people think it’s semantic and innovative while others don’t like the fact that the background color appears. I can definitely see both sides, but I feel the semantic benefit of not including empty <span>s outweighs it in a way.

Find this useful? Digg it.