Pixel Acres

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.

swfIR example

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.

3 Responses to “swfIR – a new twist for web images”

  1. You got to admit but this is looking good. Apart from the sIFR tool their are not many descent practicable flash tools that you would use in a common website.

    At least thats what I think

  2. Jonathan says:

    @Jermayn: I think there are other easy-to-use Flash ‘widgets’ that a non-flash developer would find straightforward to add to an HTML site. A few that spring to mind are sIFR, Slide Show Pro (commercial), and the Flash MP3 Player. I’m actually planning to write an article about exactly this topic in the future, so stay tuned…

  3. Ok I look forward to reading it..