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 reading
- Revised Image Replacement
- JavaScript Image Replacement
- MIR: Image Replacement
- Using Background-Image to Replace Text
Found this post useful? Why not buy me a coffee!
Related Entries
- Creating ‘Web 2.0′ Layouts using strips
- Creating an accessible yet sexy search box with CSS
- Window Resize/Mobile Browser Background Bugs
- Experiments with floats: whats the best method of clearance?
- Going elastic with ems, layout techniques
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
4 - 3:00 says:
This is great info. Does the third option ensure that search engines will not see this as a black hat technique?
Comment made on January 25, 2008 at 7:53 pm
5 - Joseph Zimmerman says:
My Favorite is the Fahrner Method
HTML:
Hello world!
CSS:
h1 {
background-image:url(”hello_world.gif”);
background-repeat:no-repeat;
height:35px;
}
h1 span {
display:none;
-or- (either works and doesn’t make much difference between screen readers)
visibility:hidden;
}
If CSS is disabled it will show the text but if images are disabled nothing shows unless CSS is disabled too.
Comment made on November 8, 2008 at 7:36 am
6 - Joseph Zimmerman says:
Sorry About the Last post. Under HTML I wanted:
Comment made on November 8, 2008 at 7:39 am
7 - Joseph Zimmerman says:
Once again sorry. I’ve got it figured out now. I’m just redoing the whole post. My Favorite is the Fahrner Method:
HTML:
CSS:
If CSS is disabled it will show the text but if images are disabled nothing shows unless CSS is disabled too.
Comment made on November 8, 2008 at 7:43 am