Blue Anvil Journal » Blog Archive » Using Image replacement techniques

Using Image replacement techniques

This week Ive been trying out a lot of image replacement techniques in main headings, and their are quite a few available. If you have a graphical header logo on a website, with the sites name, often you wont want to have another heading as plain text. Yet, you should want to have the heading readable by screen-readers, and you also want the SEO benefits of the heading.

Ive rounded up my favorite methods, and this entry will show you how to use them, and when to use them.

Method 1 - Stick the image in the Heading tag

This method simple involves putting your logo in a heading tag, and giving it relevant alt and title attributes. It works well with simple logos, but if you want cool rollovers etc, you will need a different method.

(X)HTML

<h1>
   <a href="home.htm" title="homepage">
      <img src="logo.gif" alt="Site name" />
   </a>
</h1>

Suits - Simple logo’s with an alt tag, and possibly a link

Pro’s - Alt text should remain visible with images off, logo visible when CSS disabled

Con’s - No css rollovers, you must resort to Javascript

Method 2 - Phark Method - modified

This method involved using a CSS background image to show the logo. If CSS is disabled you still see the heading text, however with images off and CSS on the logo is hidden, which is a shame.

It works by indenting the text out of sight, and showing the background image. I use this one when I have a transparent logo, e.g. A transparent png, since other methods (like Gilder/Levin below) show the heading text underneath the image.

My modded code below also allows pretty rollovers, a nice addition.

(X)HTML

<h1>
    <a title="Homepage" href="home.htm">
    <span>
        Site name
    </span></a>
</h1>

CSS

h1 a span
{
    	height:164px;
    	width:219px;
    	background: url('logo.png') no-repeat;
    	text-indent: -5000px;
}
h1 a:hover span, div#header h1 a:focus span
{
    	height:164px;
    	width:219px;
    	background: url('logoHover.png') no-repeat;
    	text-indent: -5000px;
}

Suits - Headings when you want a link, and your logo is transparent.

Pro’s - Text displayed when images off, transparent images work, css rollovers work.

Con’s - Breaks with images off and CSS on.

Method 3 - Gilder/Levin Method - modified

This method is my favorite when using opaque images. It works by hiding the text with a background image via CSS, it does however need some un-semantic markup; but thats a small price to pay. The span is basically positioned to cover up the header text, thats the reason it needs to be opaque. And remember; the width and height must match the image!

(X)HTML

<h1 id="header">
	Site name<span></span>
</h1>

CSS

h1#header
{
      margin:0; padding:0;
      position:relative;
      width:316px; height:29px;
      overflow:hidden;
}
h1#header span
{
      display:block;
      position:absolute;
      width:316px; height:29px;
      margin:0; padding:0;
      background:url(logo.gif) top left no-repeat;
}

Suits - Headings when you want a link, and your logo is opaque.

Pro’s - Text displayed when images off and also when CSS off.

Con’s - Cannot use a transparent image.

Conclusion

So they were my favorite methods, but are they best? DO you have better solutions? Leave a comment and tell me your views on image replacement.

Related Entries

Popular Entries

1 - Will says:

Good article. I use the Phark Method i think

Comment made on February 12, 2007 at 10:00 am

2 - Anthony Brewitt says:

I have been playing with some of these and prefer A and B myself. Everybody’s heard of the Flash image replacement but my problem with that is your users have to have the flash plug in, I think this adds another layer of complications. But the futures bright as I am sure I remember reading that css3 has font embedding. Lets just hope css3 arrives in our lifetimes.

Comment made on February 12, 2007 at 10:01 am

3 - Alex says:

There seems to be a bit of confusion going on ATM. Method 1 isn’t image replacement. The whole concept behind image replacement (rightly or wrongly) is to take garden-variety text and replace it with an image version of the same text. There is nothing to replace there.

The default behaviour of any browser (AFAIK) is to display the ALT text whenever the image isn’t available, which is what is happening there.

Putting a H1 around the image may cause the ALT text to appear larger in non-IE browsers (even IE7 still shows all ALT text 12px high with the ‘missing image’ icon — regardless of H1s, etc), but whether ‘the Google’ and other SEs would give your ALT text the importance of other H1 content is doubtful IMHO.

That doesn’t mean it’s wrong. It’s still the safest way to operate generally, but it doesn’t really qualify as IR.

Comment made on February 12, 2007 at 10:02 am