sIFR 2.0 vs. DTR

As I’ve attempted to both fine tune some of the details of this site and learn some new tricks, I’ve been experiemting with a couple different dynamic text replacement techniques. I’ve now settled on sIFR 2.0 for the moment, but here’s how I’ve arrived at my decision.

First, I took a look at Dynamic Text Replacement or DTR which was posted at A List Apart. This method was very easy to implement. In a matter of minutes my headers were being dynamically replaced with PNG images in my own designated fonts. This method was fairly fast to load and allowed for caching. The high quality graphics that were generated using the PHP GD library were a great improvement.

Next, I took sIFR 2.0 RC3 by Mike Davidson via Shaun Inman for a spin. The first thing of note was that although not overly complicated, the instructions for using sIFR appear daunting as compared to DTR. In short, sIFR acts in basically the same way as DTR, altough instead of dynamically replacing text with a PNG image, it is replaced with Flash. Once I got siFR up and running, and compared the 2 methods I ended up sticking with siFR. Here are my pros and cons for both methods.

DTR Pros

Higher quality images
Easy setup
Built in caching

sIFR Pros

Faster loading
Better accessibilty
Can still be selected as text in browser
Renders in plain text if Flash isn’t installed

DTR Cons

One image per word
Slower loading
Increased server load

sIFR Cons

Requires you to own Flash MX
Grainy anti-aliasing

In the end, the main reasons for choosing sIFR were the faster page loading times and the ability to select the text as normal with your cursor in the browser. Since I have Flash MX at my disposal I didn’t mind this requirement but if I didn’t I wouldn’t hesitate to use the DTR method. The bottom line is that the use of either of these techniques can add that little something extra to free your site from the boundaries of the usual font suspects.

Have you tried either or both of these methods? What are your experiences?

Posted: Sunday January 2, 2005

Categories: web development

Comments

7. January 2005

I haven’t really tried DTR properly but I know one of the key advantages of siFR for me is the ability to create rollover links, very cool.

I find using sIFR a little hit and miss at times, do you find it difficult to get the margins, spacing correct?

John Oxton

11. January 2005

I’m a little late in commenting here since you posted this days ago, but I use DTR on my website. One of the pros you left off of DTR is the fact that it, too, renders in plain text if the images fail to load. And the text that gets replaced is still picked up by Google (and other search engines) just the same.

I’d have to add that one of the cons to DTR is the fact that if you have a slower connection, you see the original text before the images load. Every time I open my site, it grates on my nerves to see that half-second ‘flash’ while the images load. It does it even on my broadband connection. Very nice write-up.

Ray

11. January 2005

John – Yes, definitely hit and miss. From the explanation that Mike wrote, it seems that even he does his sizing by trial and error. Seems as though sizing and spacing can vary greatly depending on the font you’re using.

Ray – Not late at all. Thanks for the comments. You made some great points. Take a look at the ALA article again and check out the section called “Flicker Free”. I used that method and didn’t have a problem with those annoying flickers. Basically when the page loads the visibility of the replacement element is hidden using javascript until your images load. Check it out.

Rob

11. January 2005

Thanks for the link to the fix for the flicker. I’m glad to know I’ll finally be rid of that annoyance.

Ray

13. January 2005

I would prefer DTR if i had to choose. The main turnoff for me regarding sIFR is the use of Flash. I don’t mind flash, but i use AdBlock as an extension in FireFox, and i also have the object tabs in AdBlock configured (so i can easily block annoying flash ads). And everytime someone uses sIFR i see an in that case not really appropriate tab above the headline.

For DTR i tried the zem_image_replacement extension, which i had to fix a little bit to get it to work with the fonts i wanted. But then i couldn’t use it since apparently my hoster hasn’t installed GD2.

Dirk

13. January 2005

Dirk – I just started using AdBlock as well but I turned off the Obj Tabs to avoid the problem you talked about. I’ve found that its easy enough to right-click on the ad to block it. Much better than seeing the tabs all over my own site! :)

Rob