i see many sites that have their heading as an image. what is the benefit of this? when is a best practice to use text as images as opposed to just having text in my html. is this just for supporting non standard fonts?


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.

  • Your last suggestion is not necessary: you can use a background image with text-indent: -9999em to hide the text off-screen. Sep 10 '10 at 12:03
  • 1
    Matt Cutts (from google) says that the alt tag is better than CSS image replacement for SEO in this video: youtube.com/watch?v=fBLvn_WkDJ4.
    – jessegavin
    Sep 10 '10 at 21:03
  • Just because some guy at Google says so, it might not be the best option for ALL search engines or screen readers...they're definitely not all alike. Plus, alt doesn't necessarily solve the problems that comes with user disabled CSS/Javascript. My corporate clients insist on the Leahy/Langridge Method found here: mezzoblue.com/tests/revised-image-replacement Sep 10 '10 at 22:33
  • @bpeterson76: Matt Cutts isn't just "some guy at Google". And just because your corporate clients (are they SEO or usability experts?) insist on using CSS-hiding doesn't mean it's the best method for any search engine--at least Matt Cutts' opinion represents the position of the leading search provider. And he makes a good point about the alt attribute existing for this very purpose. That said, a company logo is very different from a page heading. So Matt's advice doesn't necessarily apply here. Though you'd probably still want to find a better method. Feb 19 '11 at 12:40

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.

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.