Interface Digital Labs

Simple Flash Image replacement with jQuery.flash

Flash image replacement is a concept of replacing a piece of text with a Flash movie, giving better control over typography without sacrificing the search engine friendliness or mark-up semantics that using an image would do.

Pioneered with the sIFR technique, Flash image replacement puts a selectable Flash movie instead of a text element, usually a header tag such as an <h1> or <h2>. Users without Flash see a plain text image, Google and other search engines see the text, and user with Flash see a heading rendered with Flash, using whatever typeface has been exported as the Flash movie. However, most of the techniques we’ve tried have all had issues in terms of ensuring cross-platform consistency.

One of the simplest methods we have found for image replacement is jQuery.Flash. This is a plug-in for the javascript framework jQuery written by Luke Lutman.

jQuery.flash provides a simple, standards compliant way for embedding flash content in a web page – in this regard it is similar to techniques such as the SWFobject library. But it also makes it relatively simple to do Flash image replacement.

Here’s an example.

It’s still not perfect – the headers do not adjust if the browser window is resized, and it’s hard to control the spacing around the replaced elements, but until we see wider adoption of web fonts supporting the @font-face tag this is the best way to achieve rich typography in headers. We’re continuing to follow technologies such as Fontdeck, but a clear standard is still yet to emerge for web typography.