Background

Image replacement techniques emerged in 2003 as a way for web developers and designers to replace HTML text with images to achieve a visual effect. For instance, if a designer wants to use a graphic with a company name and logo instead of a HTML header, they would use one of the image replacement techniques to display the logo. In other cases, a designer may want particular fonts and typography for visual impact, but they may not be available on a user agent.

One of the earliest examples of image replacement originated in 2003 and called the Fahrner Technique, was named after Todd Fahrner, was created by C.Z. Robertson, and was made popular by Douglas Bowman. Under this earlier technique, a designer specifies in CSS that the image will display in most cases; if it should not display for some reason, the underlying HTML markup should take its place, and thereby still maintain accessibility.

An example of image replacement can be seen at Zen Garden where CSS is used to not display a heading contained within <span> tags, but to display a background image which contains the graphical text instead.

A more recent technique made available in 2008 is known as Facelift Image Replacement (also known as FLIR and pronounced "fleer.") The technique was developed by web designer and developer, Corey Mawhorter, and he currently publishes the standard version available as a free download, with a premium, hosted version available for a very nominal subscription fee. Plugins are also available to do FLIR-based image replacements for blogging software and content management systems such as WordPress, Drupal, and Joomla. The technique is based on the Javascript and PHP scripting languages.

About FLIR

Using Facelift, web developers, designer or webmasters can add image representations of text to their website; thereby displaying text effects that might not otherwise be available due to user agent limitations and settings. The technique is based on Javascript and PHP; Javascript detects within the HTML page whether text should be replaced and PHP on the web server side generates images that are sent back to the user agent and displayed in place of the text. In cases where either a user agent cannot display the image, or the PHP does not generate an image replacement, the HTML text will be displayed.