Google's image replacement technique
Image replacement is a great technique for anyone wanting to maximise SEO and design on a web page. What with the “do they don’t they” question of whether Google penalise pagerank for those using it more or less answered, I thought I’d have a look at how Google do it themselves.
On any Google search results page, you will see their logo at the top left of the page, next to the search box. This image is an image sprite consisting of most of the images used on the page. If we disable images on the page, we are left with a text link back to Google’s homepage where Google’s logo was. Disabling both styles and images leaves a similar result. Google achieve this with the following HTML.
<h1>
<a href="http://www.google.com/">
Google
<img width="167" height="222" src="nav_logo13.png" alt="" />
</a>
</h1>
The HTML used is what you’d expect for a text based link, apart from the empty alt text attribute and with the addition of some text reading “Google” between the anchor tags. It is this text that we need to hide (or replace) in order to get the look we need. This is achieved with the following CSS.
h1
{
font-size: 1em;
font-weight: normal;
}
h1 a
{
height: 49px; width: 137px;
display: block;
position: relative;
overflow: hidden;
}
h1 a img
{
border: 0;
position: absolute;
left: 0;
top: -41px;
}
Let’s start with the CSS applied to the image itself. The border property is to remove the default anchor border style. So far, so boring. The position property is more interesting, as it allows us to hide the “Google” text between the anchor tags. Absolutely positioned elements can be positioned with the top, right, bottom and left properties. These properties set the margin (in pixels) between the element and the next parent element with a position property other then the default “static” value.
In our case, the parent element is the anchor. The left property is applied to our image with a value of zero, which means the image will have no left margin in relation to the anchor. As a result of this, the text between the anchor tags is covered by the image. Image replacement complete!
The rest of the styles are only necessary if you are going to use an image sprite. The height, width, display and overflow properties applied to the anchor trim the image so that only the Google logo appear, and the same goes for the top property applied to the image. The font styles applied to the h1 element are to make the text small enough to hide behind the image.
Alt text is used to give context to an image for a screen reader or if images have been disabled by the user. In this case, it is not necessary; the “Google” text between the anchor tags serves this purpose. One criticism you may make of this method is that it generates “double text” if the user has disabled styles but not images, as both the image and text are visible. Please bear that in mind if you would like to implement this method.
If you would like to learn more about the CSS discussed in this article, W3 Schools is a great resource. If you’re wondering how on earth I figured out the CSS applied to each element, you need to get Firebug for Firefox in your life!