: When should i consider having text as an image in my website heading i see many sites that have their heading as an image. what is the benefit of this? when is a best practice to use

@Ogunnowo487

IMO, with this sort of thing, you should be more concerned with usability/accessibility than SEO (because SEO will tend to take care of itself). A page heading is a pretty critical part of your document; you want it to be accessible to everyone.

That said, using alt text or using JS to replace a text heading with an image/flash is a good compromise. You keep accessibility and still have a nice clean pretty text.

The most common legitimate reasons to do this are:


To use a non-standard font without having to deal with licensing/conversion/support issues of embedding a web font. Web font support is only now starting to come into its own, and although there are some commercial/free services that simplify the acquisition of embeddable web fonts, their support on mobile browsers is limited.
Highly stylized headings that just aren't possible to do with standard text. Even with CSS3, which is not yet supported by most browsers, there is a limit to what you can achieve with stylized text. This is usually a better excuse for ads, callouts/pull-quotes, or other non-content text, but it can be excusable for sites which are for promotional/branding/entertainment purposes rather than informational purposes.


The most common non-legitimate reasons to do this is web developer incompetence. These are the web developers that make the body text an image as well, or make an e-commerce site entirely out of Flash.

Things to consider:


You cannot highlight or copy-n-paste these headings. So even if you are using alt-text or JS-replacement, usability is greatly impacted. This is less of an issue if the headings are short and simple (e.g. "About Us", "Contact", "News", etc.), and you can attenuate this by using Flash, though that comes with its own problems.

On a personal note, I use a plug-in called "context search", which lets me highlight text on a page and do a quick search with it from the context menu using any of the search tools I have installed for Firefox. Likewise, many people use dictionary tooltip plugins that let them quickly look up a word on a page just by double-clicking it. Flash completely disables this, which is quite annoying.

You cannot dynamically resize the text as some people like to do. So if someone wants to reduce the font size to view more text on the screen, or increase font size to read the text better, they are SOL. This is particular pertinent to the visually impaired and those using mobile browsers.
Images do not text-wrap well. So those using lower resolution screens could have some major layout issues. Flash may be a little better if combined with some kind of JS workaround.
Even if you include alt text, you're altering the semantic structure of the page. This can have consequences for web crawlers, screen readers, and other software that processes web pages. Again, using a JS-replacement could largely attenuate this.


I wouldn't worry about dynamic headings since you can always generate text images server-side, but there are plenty of reasons to think long and hard before doing this. And if you are going to do it, I would recommend using a well-tested JS- & Flash-based solution like sIFR.

Edit:
One more thing—one possible workaround that many people use (but there is some disagreement on the ethics of) is to use an image and then hide a span element containing the text behind the image or off-screen. This means that crawlers can see the text, and even screen readers, and this requires only CSS and no JS support. Some people consider this "spammy", but I think it's legitimate if you're using this technique to describe text images rather than for keyword stuffing or bait-n-switch SEO.

Vote Up Vote Down

@Chiappetta492

Reasons to use an image header with text:


The text isn't necessary for SEO.
The font can't be reproduced on the
web.
The text is integrated too closely with a
logo to separate the two.


Reasons to use text as your header:


The text is necessary for SEO.
The text needs to scale according to
the browser window.
The text needs to scale according to
an em-based font size.
The text needs to be dynamic in any way.


If you do use an image, consider using the tag with an alt attribute rather than a CSS image. This is important for accessibility purposes, but it could also contribute to SEO.

Vote Up Vote Down