DM 171: Image Replacement

Image Replacement for Text

An image of text in place of standard text does little to help audiences that do not view images such as search engine indexing robots. There are techniques that will give you the best of both worlds. Mostly. This is the web after all…

Properties of Mass Deception

There are two properties you can use to effect the way HTML elements are displayed; both can be used for replacing text with images.

  • display:none - Display:none applied to an element completely removes it from view and from the normal flow of the document. Other values for display include block, inline, list-item, and others less well supported.
  • visibility:hidden - This value for visibility hides the element but does not remove it from the flow of the page. Other values are visible, collapse, or inherit.

FIR

FIR stands for Fahrner Image Replacement; named in honor of the first person to propose the technique, Todd Fahrner. The concept is simple, surround the text with span tags, assign a background image and size for the containing element (usually a heading tag), and set the display:none or visibility:hidden for the span enclosed text. The code might look like this:

<h1 id="firstheading"><span>First Heading Text</span></h1>

and CSS

#firstheading { background-image: url(path_from_cssfile_to_image);
background-position: your choice ;
background-repeat: no-repeat;
width: in pixels of your replacement image;
height: in pixels of your replacement image; }

#firstheading span { display:none }

Here is a heading with standard formatting:

First Heading Text

Here is a heading using local styles to apply FIR:

First Heading Text

Turn off your browser’s CSS and look at the headings again.

Image replacement offers the designer incredible options for appearance, but it comes at a cost. Not all screen readers (software that reads the web page content aloud) speak text whose visibility is hidden or whose display is none is one problem; users that surf the web with CSS on and image off will see no text or replacement image. For these reasons, FIR is a somewhat controversial technique.

Here is a page that talks about the hazards of FIR: http://m.alistapart.com/articles/fir

This page lists refinements to the FIR technique that solve some of the problems and is a good read: http://www.mezzoblue.com/tests/revised-image-replacement/

Use these techniques with thought and care; each one has a trade-off.