Skip navigation

Image Replacement Techniques

The limitations for fonts available on the web has frustrated many web designers. With millions of awesome fonts available, the web is limited to merely a couple dozen since the font must be on the user’s computer in order to generate on the page. Faced with this font limitation, many designers resort to using graphic images to replace the text in headers and headings to jazz up a website or blog.

Unfortunately, by replacing text with an image, your page has just lost the war in maintaining web standards for accessibility. Screen readers can’t “read” the image. You would think that the read of the image’s ALT declaration would be enough, but it doesn’t quite work that way. The battle to develop a totally accessible website or blog is constantly fought between the issues of accessibility and design. The designers want it to look pretty no matter what, and the accessibility fans require the page to be seen, heard, and accessible for everyone, disabled or using a non-standard form of Internet access like on a cell phone, handheld computer, or braille reader.

Image Replacement

Image Replacement is a method of using an image to replace text and content, specifically header information, titles, headings, and visual content, while preserving the “readability” of the page. There have been many “solutions” which turned out not to work so great. And there have been a lot of innovations, in screen reader capabilities as well as in CSS and HTML. So what is the perfect solution for image replacement?

In an attempt to find common ground and a solution, Mezzoblue’s “Revised Image Replacement” article dissects image replacement theories to try to come up with the “right” one.

The article tackles each of the currently available image replacement options, including the original Fahrner Image Replacement technique, the Radu Method, the Leahy/Langridge Method, Dwyer Method, Shea Enhancement, and more. Which one is the best? Well, that’s part of the debate. So far, the best image replacement choice is the one that you choose.

If you are considering designing your blog, website, or WordPress blog with image replacements for content and headings, take a look at the methods available and decide which one will work best for you.

Here is more information on Image Replacements.

WordPress Image Replacement Tools

There are some WordPress Plugins which will help you replace heading text with images.


Technorati Tags: , , , , , , ,
Site Search Tags: , , , , , , ,

5 Comments

  1. Posted December 2, 2005 at 5:59 pm | Permalink

    You sweet thing, you :).

    (P.S. It’s “Huddled Masses”, by the way. That’s the precursor to my plugin.” Revised is the successor to mine.)

  2. Posted December 2, 2005 at 7:15 pm | Permalink

    Thanks for the correction, my hero and star!

  3. Posted December 12, 2005 at 5:58 am | Permalink

    >> my hero and star

    i totally agree ;)

    btw: integration of “revised image headlines” is much more complicated (though its coldforgeds identical plugin) and isnt very intuitive.

    - no one asked me, but i found out, that for an improved usage, with all available css-techniques it would be even better to have the plugins output to tell more variables. if someone could also assign height, width and imagepath as seperate values one would be given more freedom when writing a stylesheet. I didnt manage to get my hands on this yet. What do you ppl feel about the implementation, and/or usage? At the moment i just override height/width by assigning it twice what is a very dirty solution…
    greets

  4. Posted December 12, 2005 at 8:54 am | Permalink

    As stated in the article, there is a lot of debate over whether this is acceptable or not. The issue relates specifically to how much the implementation impacts accessibility. If the page can still be read and the titles read by accessibility programs like text readers, then it should be okay.

    I’m hoping that a better solution than using graphics to replace fonts will be available in the future versions of CSS and XHTML. Then this would not be an issue and people could go font crazy on web pages. oooooo, scary thought.

  5. Posted February 8, 2008 at 11:08 pm | Permalink

    i have been looking all over the web for this post. thanks a million…


9 Trackbacks/Pingbacks

  1. [...] Accessible Header Images with CSS and XHTML  – from sitepoint.com.  Goes beyond the Fahrner method, finally answering the question “Is image markup or content?” [...]

  2. [...] The challenge for the web page designer is how to use decorative and more distinctive fonts on web pages without using graphic images. Until recently, there were few options, and those options don’t cross browsers. [...]

  3. [...] Image Replacement Techniques [...]

  4. [...] Image Replacement Techniques for Titles [...]

  5. [...] Image Replacement Techniques for Titles [...]

  6. [...] Image Replacement Techniques [...]

  7. [...] Image Replacement Techniques [...]

  8. […] Image Replacement Techniques […]

  9. […] Image Replacement Techniques […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 21,163 other followers

%d bloggers like this: