Image Replacement - Webmaster Forum - Web Design, Programming and SEO forums

04-28-2010, 01:44 AM

Zif

Status: I'm new around here
Join date: Apr 2010
Location: Idaho
Expertise:
Software:

Posts: 7

iTrader: 0 / 0%

Zif is on a distinguished road

Image Replacement

What is image replacement and how can it help with SEO campaigns. I have heard of using image replacement web site logos instead of directly linking in the image, but I could not find out why this method is better.

04-28-2010, 07:03 AM

hjalmar

Status: Senior Member
Join date: Nov 2004
Location: Sweden
Expertise:
Software:

Posts: 857

iTrader: 11 / 100%

hjalmar is an unknown quantity at this point

Originally Posted by Zif

Dynamic replacing text with image(cufon (canvas)) and/or flash with a fallback for non-js clients bots, crawlers, parsers or whatever you want to call it.

So this...

HTML Code:

<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Index</title>
	<style type="text/css" media="screen">
		@import url(style.css);
	</style>
</head>
<body id="index">
	<h1>my cool company name</h1>
	<p>
		my super duper slogan
	</p>
	
	<h2>sub heading</h2>
	<p>
		we are a company.... 
	</p>
</div>
</body>
</html>

...would be more accessible for bots than this

HTML Code:

<!DOCTYPE html>

<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Index</title>
	<style type="text/css" media="screen">
		@import url(style.css);
	</style>
</head>
<body id="index">
	<img src="branding.gif" alt="" />
	<img src="slogan.gif" alt="" />
	
	<img src="sub_heading.gif" alt="" />
	<p>
		we are a company.... 
	</p>
</div>
</body>
</html>

The only point in using image replacement is if it would have to be dynamic (custom fonts etc) else just do it with css. As the point with all of this is to keep the content in the DOM to be parsed.

04-28-2010, 11:41 PM

Lyke

Status: I'm new around here
Join date: Mar 2010
Location: United States
Expertise: Working on becoming an expert
Software: Firefox, Visual Studio

Posts: 21

iTrader: 0 / 0%

Lyke is on a distinguished road

I use CSS for my image replacements. It is pretty hard for a bot to tell what an image is, but if you use text via image replacement it can add to your SERPs.

04-29-2010, 02:20 AM

Zif

Status: I'm new around here
Join date: Apr 2010
Location: Idaho
Expertise:
Software:

Posts: 7

iTrader: 0 / 0%

Zif is on a distinguished road

Okay, I think I understand now. Is this sort of like using keywords as image names instead of something like 'image1' so not only if the image does not show up people will know what it was but search engines will be able to tell what it is?

04-29-2010, 03:10 AM

JasonGDX

Status: Junior Member
Join date: Nov 2006
Location: Pennsylvania, USA
Expertise: Design, HTML, CSS, PHP, MySQL
Software: Photoshop, Coda

Posts: 95

iTrader: 4 / 100%

JasonGDX is on a distinguished road

Originally Posted by Zif

No. It is using images as backgrounds instead.

For example, for the name of the site you might do this:

HTML Code:

<h1 class="logo">Site Name</h1>

...instead of using an image of the logo.

Then the CSS for that would be something like this:

Code:

h1.logo {
  background: url('path/to/logo.png');
  display: block;
  height: 40px;
  width: 100px;
  text-indent: -9999px;
}

Height and width would be the size of the image. Text indent is important because it will take the text from inside the element and put it 9999 pixels to the left of the element, essentially making it invisible to your users, but not search engines.