swfIR – a new twist for web images

You’re probably already familiar with sIFR, a technique that replaces boring HTML text with spiffy Flash text, without messing up your HTML markup. In the same vein comes swfIR, which uses Flash to perform a host of desirable modifications to images: borders, rounded corners, rotation and drop shadows.

In the past it would have taken a lot of repetitive Photoshop work to apply these sort of visual effects to images, and god forbid you ever redesigned the site and had to remove the effects from every single image. swfIR answers that problem by applying effects in automated, non-destructive fashion.

swfIR is the brainchild of Dan Mall from Happy Cog, and is designed with progressive enhancement and standards compliance in mind. Each ‘swfIRized’ image must be wrapped in a span tag and have an additional css class applied to it, but otherwise the original markup remains untouched. JavaScript is then used to replace the HTML image with a Flash movie into which the original image is loaded, and visual effects are applied.

The technique is not without its drawbacks however. One thing I don’t like about it is that the image replacement does not occur until the window.onload event is triggered, which means that the unstyled image must load into the page before it is replaced. I wonder if the replacement should be triggered using a JavaScript event that is fired when the DOM has loaded, not the entire page. Apparently there are small Camino/Mac rendering bugs too. I understand that the swfIR developers are working on these issues, so it will be interesting to see what they come up with.