Blogless

I haven’t had much time to play with it, but I have to say that at first blush, FaceLift Image Replacement looks pretty impressive as an heir to Scalable Inman Flash Replacement (SiFR).

I’ve used SiFR on a couple of sites before, and while it can create a vast improvement in the visual appeal of a site, it can be a rather painstaking task to get everything perfect.

For those not in the know, both SiFR and FLIR (Facelift Image Replacement) are scripts designed to replace vanilla HTML and CSS elements with representations of text (Flash movies and images respectively) on a web page.

The goal of this is that these representations are capable of using fonts that otherwise might not be available to your site’s visitors, while still providing graceful degradation of the content for users whose browsers don’t support the technologies the scripts are based on (Javascript in both cases, Flash in SiFR’s).

FLIR seems to address a significant number of these problems.

Among FLIR’s distinctively attractive features:

1. The replacement image is dynamically generated (by default) using the CSS styles that you have applied to the element.
   1. This includes the ability to use multiple colors, which is handled automatically.
2. Image replacements can be generated using three separate modes; stretch, progressive, and wrap (and anybody who has ever tried to use SiFR on a header of arbitrary length — say, pulled from a database — knows how valuable this feature will be):
   1. Progressive will shrink the text size of the generated image until it fits inside the HTML elements box.
   2. Stretch will generate an image and resize the HTML element to contain it.

For my part, I would also add that FLIR has three additional bureaucratic advantages:

1. For those of us who use ad-blocker plugins, we know that SiFR-generated swfs cause the dreaded Block this tab. Thus, the FLIR solution not only eliminates the requirement of the Flash plugin altogether, it also eliminates unsightly visual elements often caused by Flash movies.
2. FLIR also draws its fonts from TTF files, eliminating the need to generate custom SWF font libraries.
3. The FLIR Javascript class exposes a nifty set of methods which make it incredibly easy for those of us who use Mootools (or any similar Javascript framework). For example:

   $$("h2").each( function(el) { FLIR.replace(el); } );

If FLIR lives up to its promises, it’s an incredibly significant step forward in the world of automatic image replacement.