Dynamic Image Replacement: Practical Techniques and Tools
Note: This post was first published on the 11th Sep, 2009.
When it comes to web design, creativity of design should not be hold back by the limited choices of supported web fonts we call the web-safe fonts. Designers should be free to use any fonts they prefer on titles and content.
Without further ado, let’s take a look at some of the techniques to achieve Dynamic Image Replacements.
Commonly Used Techniques
Here are some of the most commonly practiced techniques for dynamic image replacements.
Scalable Inman Flash Replacement (sIFR)
sIFR 2 (recommended) is the current stable release, however if you are looking into implementing sIFR, you should also know that siFR 3 beta is also available for download. It might be a little buggy but at least it solves the font-expansion problem of sIFR 2.
Tools for sIFR that might come in handy:
- sIFRvaultsIFRvault is a repository of sIFR fonts you can download.
- sIFR GeneratorOnline tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download.
The original sIFR is 22k, so Dave decided to rework it using a more object-oriented approach, and the result? 3x smaller at 3.7k.
PHP + CSS Dynamic Text Replacement (P+C DTR)
As the name suggest, this is a text replacement method that uses PHP and CSS that make use of the original method described by Steward Rosenberger. It is also an enhancement from the previous version developed by R. Marie Cox that doesn’t support text wrapping and inner tags. Another cool thing about P+C DTR is, the image text can be customizable with CSS tags.
Personally, after some experiments with typeface.js, we think there could be some potential room for improvements. Firstly, the fonts tend to render slightly different among different browsers. If you are using typeface.js, we suggest you do a cross-browser check before assuming what you see in Firefox will be what you see in Safari. Text are also not selectable with typeface.js.
Custom fonts in typeface.js are not compiled; meaning users are able to download the fonts. That could lead to copyright problems. It’s advised that you check thoroughly to make sure the fonts you are using are ok for redistribution.
Also known as Facelift Image Replacement (FLIR), it is another great method to sIFR that do no required Flash. Looks like very other alternative is hitting in sIFR’s Flash issue.
Facelift uses PHP and PHP’s GD Library. They inherit the legacy problem of custom font replacements – unable to select the text. Aside from that, we think it’s great too.
The techniques above might be more widely used, but we’ve noticed some other ways too to give convert your text into beautiful custom typefaces.
TypeSelect leverages on typeface.js, jQuery, the canvas, toDataURL, CSS background properties and real overlayed text to give a custom typeface on your website. Text selection works on Firefox, Safari and even Chrome but not IE.
Swf Image Replacement (swfIR)
swfIR gives you the ability to apply an assortment of visual effects to any or all images on your website. For example, you can add any images on your website and swfIR will add a rounder border, rotate the positioning or even add shadows to it.
Nine Techniques for CSS Image Replacement
These are not dynamic text replacements, but Chris Coyier demonstrates as many as nine different CSS techniques to replace text with images; each with a report card listing the condition of – what if images are on/off, CSS is on/off.
Font Burner leverage on Scalable Inman Flash Replacement (sIFR) to change your titles into custom font. All you need to do is find the font, select it and insert the code into the head and your title will be changed in no time.
WordPress + Dynamic Image Replacement
If you are a WordPress user looking for a dynamic image replacement solution for the title or even the content of your blog, chances are there is a plugin for them. Here are some text replacement plugins we have come to know about.
sIFR WordPress Plugin – WP sIFRWP sIFR was created to remove the complications from getting custom fonts on a WordPress site. With WP sIFR, you only have to upload your SWF font file to the plugin directory and then login, activate it, and configure its styles all in the Settings panel.
Cufon WordPress Plugin – WP-CufonThe only thing you have to do is converting your fontfiles and upload them into the plugins directory. You can enable the objects you want to get replaced in the Admin Menu of WordPress.
Font Burner Control PanelThe Font Burner Control Panel plugin allows you to easily add any of the 1000+ free fonts available on the Font Burner website to your WordPress theme.