Using Images Instead of Text.

[SpicyDuck]

Is there any difference, or is it looked down upon to use images, instead of text for headers on a web page?

Do;

<h1><img src="imagefolder/image.jpg" alt="Welcome" /></h1>

and;

<h1>Welcome</h1>

Really make much of a difference? In terms of search engine rankings, browsers compatibility etc. Is it generally considered to be quite bad work when using images in this way?

Thanks,

Phil.

 

[Al Vallario]

// Shove this in your CSS file

h1#welcome {
  background: url("imagefolder/image.jpg") top left no-repeat #fff;
  height: ??px;
  text-indent: -5000px;
  width: ??px; }

// ...and this in your HTML

<h1 id="welcome">Welcome</h1>

The text is there for search engines and people using screen-readers to see and you get a shiney image without the need for it to be inline

 

[SpicyDuck]

// Shove this in your CSS file

h1#welcome {
  background: url("imagefolder/image.jpg") top left no-repeat #fff;
  height: ??px;
  text-indent: -5000px;
  width: ??px; }

// ...and this in your HTML

<h1 id="welcome">Welcome</h1>

The text is there for search engines and people using screen-readers to see and you get a shiney image without the need for it to be inline

The thing I really wish the keep, using the design of menu, headings etc in Photoshop, is the smoothness that gives the site it's overall proffesional look, which is lost somewhat when using plain HTML and CSS.

I thought screen readers etc, just read out the "alt" of the image, isn't that the whole purpose of it?

Phil.

 

[Bloo_Fish]

Headings are meant for text, not images - if a search engine sees an image in a header as opposed to text I’m pretty sure it will give it a lot less importance.

Either try the image replacement method Al Vallario posted, or check out these other image replacement techniques.

This way you can keep the text in your heading and replace it with an image for those that can see images.