Flash image replacement

sIFR or Scalable Inman Flash Replacement is a web design technique used on the Enovate Design website to provide the green headings at the top of each page.

It's an extremely useful technique in any web designer's arsenal.

Essentially it's used to change boring headings in standard web fonts into more impressive headings in rare fonts which site visitors aren't likely to have installed on their computers. The same effect could of course be achieved using images or image replacement but sIFR is much easier to maintain because it doesn't use images and is also highly accessible.

It's no surprise then that a similar technique has now been developed for images, called swfIR or swf Image Replacement so you can now change a normal image into a rotated image with a chunky border and shadow without actually having to make any modifications to the original image file. Plus there's also a multitude of variables that can be tweaked to fine tune the results.

Fantastic...But, there are a few issues at present:

  • Resizing/zooming in Opera crashes the browser
  • Flash of un-styled content: images load first before JavaScript replaces them
  • alt text is not preserved upon replacement
  • HTML right-click options are disabled
  • Doesn't work with hot-linked images because of security restrictions in Flash

The Opera issue aside, the worst of these in my opinion is the Flash of un-styled content and this is a common issue with many DOM scripted effects. In this instance the effect seems particularly exaggerated and is one of the reservations I'll need to overcome before this script makes it into a project anytime soon.

Tagged with:

You might also like… Page Source and Accessibility