What is image replacement? If you are a web developer who cares about standards you have surely come across CSS image replacement techniques. If not, you can do a bit of research on the available methods of image replacement and the original Fahrner Image Replacement (FIR). The basic idea here is to use standard html markup containing text, and then replace it with an image using CSS. Using this method search engines and screen readers can understand the HTML, while at the same time your users get to see the image of the text. This is generally used when a web developer (or client) needs wants to use a specialized font for page headings instead of a web friendly font.
When to use CSS image replacement
The typical use of image replacement is for replacing page headings with an image of that text. While I avoid this when I can, I do promote and use this technique for site logos on almost every site I develop. As 99% of companies have logos that can not be created with web fonts, this is a real world application for image replacement that can and should be used on production web sites. Furthermore, Google is OK with image replacement and has confirmed it will help your search engine placement as long as you aren't falsely representing the image.
Ultimate Image Replacement (The Schoberg Method)
At LJ Host we build a lot of websites, and I have toyed around with a number of different methods over the years and they all do the job to some extent. However, there are a number of caveats with some of the methods including inaccessibility to screen readers and the text being hidden when images are turned off. My method is based on the cover up method created by Petr Staníček [aka -pixy-] and showcased on his site wellstyled.com. My method has added support for linking of the object (I always think it's a good idea to link the logo to the home page), and making the text printer friendly using print sytles.
Example 1 (the basic)
In the first example I have shown the technique in it's most simple state. Note the empty <span> tag inside the <a>. This is what allows this method to work. If css is off you see the text. If css is on but images are off, you see the text. However, if css is on and images are on, the <span> is set to the same height and width of the containing <a> and <h1> and then positioned absolutely with the logo image set as the background of the <span>. The logo then overlays the text, showing only the image of the logo, and hiding the text behind it. (Note: Your image must be fully opaque or you will see the text through it.)
HMTL
<h1 class="logo"><a href="/">Company Name<span></span></a></h1>
CSS
.logo {
margin:0;
padding:0;
height:45px; /* Height of logo */
width: 210px; /* Width of logo */
overflow:hidden; /* Stops text from protruding if H1 text is larger than logo */
position:relative; /*must be relative or absolute */
}
.logo a{
display:block;
height:100%;
width:100%;
}
.logo a span{
display:block;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
background:url(logo.gif) no-repeat left top;
cursor:pointer; /* ie demands we reinstate the pointer cursor */
}
Example 2 (with print styles)
In example 2 we take things a bit further by adding the print styles. The print styles are essentially reverse engineering the first styles we set. Different browsers handle printing differently. By default, Internet Explorer does not show background images and Firefox does. Furthermore, depending on your logo dimensions and length of company name text, you could run into a number of issues with spacing. We alleviate all these problems by adding print styles. First, we use display:none; to hide the <span> which is the layer containing the logo image. Then we reset the widths and heights of the <h1> and the <a>. Finally we add some margin to the bottom of the <h1> to add some space between it and any following elements on the page for aesthetics. Compare a print preview of the Example 1 and Example 2 demos in a few different browsers to see for yourself.
CSS - Added
/* == Optional Print Styles =================================================
===== Put this at the end of your style sheet or in your print style sheet */
@media print{
.logo a span{
display:none;
}
.logo, .logo a{
width: auto;
height:auto;
text-indent:0;
top:0;
left:0;
}
.logo{
margin-bottom:1em;
}
} /* end print */
Example 3 (real world example)
In the final example I've altered the code just a touch by setting the position:absolute; and defining the exact location using top: and left:. I then dropped it into a layout so you can see how it would work in a normal situation, along with some final print styles for the whole layout. (Note: If you use position:absolute; for the h1.logo you must set the containing element to position:relative;)
CSS - Tweaked
.logo {
margin:0;
padding:0;
height:45px; /* Height of logo */
width: 210px; /* Width of logo */
overflow:hidden; /* Stops text from protruding if H1 text is larger than logo */
position:absolute; /*must be relative or absolute */
top:25px;
left:30px;
}
Final Notes
Even though I have called it the "Ultimate" Image Replacement technique there are a couple issues to be aware of.
- Your image must be opaque. If you have a transparent gif or png then the text from the
<h1>will show right through. So this creates a few situations where this method will not work. - It does require an empty
<span>tag just before the closing</a>. While this doesn't cause any real performance issues, html purists (myself included) are never too enthused about adding extra markup that has no structural meaning. That being said, I think the cost is worth the benefit in this case.
