graphicPUSH: Image Replacement

Image Replacement

CSS is a natural complement to writing websites with Search Engine Optimization (SEO) in mind. Because it strips out frivolous code like <font> and nested tables, search bots from Google and Inktomi more readily devour the text between clean paragraph and header tags and can more accurately rank pages based on content.

Every search engine weighs the meaning of each HTML tag. For instance, bots recognize that <p> means “paragraph” and <h> means “header.” They also recognize that headers are more important than paragraphs and should get more play in page ranking. In fact, search engines recognize all HTML tags and give them appropriate weight, from the critical <title> tag to the near-useless <img> tag.

Since images contain raster data, their content cannot be read by bots or other machine readers (such as JAWS). Even with the “alt” tag, which is read by Google and others, graphics receive little consideration. Unfortunately, images are the only way for web developers to display an uncommon font or controlled typographic tricks that aren’t possible with style sheets.

That being said, there are several techniques used for image replacement. None of them are perfect. My favorite technique is a spin-off the Phark method that uses negatively indented text to hide the HTML text and then use a background image in its place. I used this technique on every page of graphicPUSH for the top header (“graphicPUSH || Front page”), the banner graphic and the left column subheads. The code is this:



	<div id="content">

<h2 id="home">graphicPUSH: Home</h2>

</div>

	#content h2 {

margin: 10px 0 0 122px;

padding: 0;

text-indent: -9999px; /* sends text way off screen */

width: 448px; /* width of image */

height: 31px; /* height of image */

display: block;

}

#content h2#home { background: url("/images/header_frontpage.png") top left no-repeat; }

This technique has several advantages. Since the code only displays the value of the <h3> tag and not the image tag, the data gets full weight with search engines. It also displays normal text when CSS is turned off, so it can be read by screen readers and easily manipulated for the print-only style sheet (hit Print Preview on this page to see what I mean). The only remaining issue is when CSS is left on (so the actual text is tossed to the left) but images are turned off (nothing to replace the ousted text). But this scenario is so uncommon that I consider it a non-issue.

The top masthead of graphicPUSH is set as a link back to the root directory. The code is handled slightly differently for anchor tags:



	<div id="header">

<h1 id="maintitle"><a href="/">

graphicPUSH: Front Page</a></h1>

</div>

	#header h1#maintitle {

margin: 0;

padding: 0;

text-indent: -9999px; /* sends text way off screen */

width: 760px; /* width of image */

height: 94px; /* height of image */

}

#header h1#maintitle a { background: #fff url(/images/maintitle.png) top left no-repeat; display: block; margin: 0; padding: 0; width: 100%; /* ensures the space is filled */ height: 100%; /* ensures the space is filled */ text-decoration: none; }

That’s it. I hope this helps anyone looking for a quick, easy and effective image replacement technique.

Comments.

nathan: wrote the following on Thursday December 30, 2004

I prefer this method because it requires no extra markup, but unfortunatley it doesn’t work in Win IE 5.0

Mark Bell: wrote the following on Thursday December 30, 2004

Sadly, that is the case. I found I had to use Tantek Celik’s IE5 band pass filter to override it with the line-height method instead (IE5 text-indents the background image as well).

patrick h. lauke: wrote the following on Thursday December 30, 2004

sometimes the simplest methods are the best…i often use a standards IMG element with appropriate ALT attribute, wrapped in whatever relevant tags (H1, H2, H3, etc). screenreaders recognise these headings (e.g. in JAWS, when bringing up the document outline, it correctly identifies a heading used this way by its ALT). other than the possible hassle of having to go through pages to change image dimensions once the source image changes (unless you leave width/height attributes out), there’s (in my mind) no clear advantage to using any of the CSS replacement techniques…

Kevin: wrote the following on Thursday December 30, 2004

Patrick—
While wrapping an image within a header tag may work for the Jaws reader, there is absolutely no SEO advantage. To Google, an image tag is an image tag, whether its inside another tag or not.

The CSS image replacement provides a clear advantage in this department. The HTML code shows nothing but <h1> with text, which is devoured by search bots and given very high priority over other content for Google’s indexing.

Ronald T.: wrote the following on Thursday May 11, 2006

Actually, there is a way to make it work in IE5, I’ve posted it on my blog: http://www.eingko.net/blog/?p=16

Rozza: wrote the following on Thursday April 5, 2007

For what it’s worth, webaim.org recommends hiding content above the top of the viewport. As they explain:

Placing the content above the viewport is preferable to placing it to the left or right of the viewport because both of these other directions cause display irregularities in some browsers.

.hidden
{
position:absolute;
left:0px;
top:-500px;
width:1px;
height:1px;
overflow:hidden;
}

graphicpush

Image Replacement

Comments.

Metadata.

Synopsis

Socialize

Subscribe

Recent Tweets