27 Feb 2007 11 am eastern

swfIR (swf Image Replacement)

Happy Cog’s Jon Aldinger, Mark Huot, and Dan Mall have published an image replacement method to remove some of the limitations of the standard HTML image object while supporting standards-based design concepts.

Using unobtrusive JavaScript, progressive enhancement, and Flash, swfIR (pronounced “swiffer”) lets designers include high-quality, scalable artwork in user-resizable web layouts—and even add styles to the images.

[tags]swfIR, imagereplacement, design, webdesign, webstandards, flash[/tags]

Filed under: Design, Flash, Happy Cog™, Standards, Tools

27 Responses to “swfIR (swf Image Replacement)”

  1. a later date » Blog Archive » swfir said on

    [...] Word is out all across the web design RSS feeds this morning: Dan Mall and crew have introduced swfIR, a method of styling images with Flash. It means that you can add borders, rounded corners, drop shadows – even rotate the image – on the fly. Which is a boon for CMS based sites, because designers can now add some slickness to image display without the content generators needing to be skilled in image manipulation. Dan wrote more on the concept at A List Apart today, too. [...]

  2. Code Candies » Blog Archive » Swiffer? said on

    [...] Via Fab. Jeffrey Zeldman. [...]

  3. Deny Sri Supriyono said on

    aha! the .zip file download is working now :)
    is that because i click the swfIR link through your website, mr. zeldman? :D

    the demo looks fantastic!
    can’t wait to play with it very soon.

  4. Jon L said on

    I saw it this morning and started playing around. The only issue I see is the flash before the change is implemented. If you select any of the examples you see the square image and after the page finished loading you see the rounded corners. I am still looking around, so I may have missed something. I do like the direction swfir is headed and will look to see how I can implement this into some of my web projects.

  5. Yellowstone Blvd » Blog Archive » swfIR (swf Image Replacement) said on

    [...] Via [...]

  6. Alex Hillman said on

    Looks like he who snoozes, looses.

    I built something very similar, but not nearly as robust, back in the fall.


    Mine doesnt do all of the image effects..its goal was to utilize flash alpha transparency to deal with IE6’s lousy png support.

    What my solution DID do was take care of the flash of untreated images…

    I’ll apologize in advance for garbage documentation and almost no documentation in my first run at the code.

    Nonetheless…I’m glad someone did what I was going to do, and made it freaking sweet.
    Cheers to the team. I hope this really takes off.

  7. Scott Fegette: swfIR Image Replacement said on

    [...] You can read more at the swfIR site, and find additional commentary at both Jeffrey Zeldman and Mike Davidson’s weblogs (as they cued me in on swfIR to begin with). Good stuff. [...]

  8. swfIR // shorty114.net said on

    [...] It arrived for text, and it was only a matter of time. Today I ventured to my feed reader and I was met today by quite a few posts announcing swifIR, Flash-based image replacement. Why? [...]

  9. Jeffrey Zeldman said on

    @Alex Hillman, Dangerously Awesome is firing blanks.

  10. Alex Hillman said on

    Something has been funky with dreamhost the last couple of days….It’s up right now, 9:46AM EST. Without the www. prefix the site won’t load. I’ve submitted a help request to support.

    Thanks for trying to check it out though…I’ll drop you a line personally when things get resolved to see if you’ve had a chance to get into it.

    Thanks again!

  11. Dan Mall said on

    Jon L.: Thanks for the feedback. We’re certainly aware of the issue and we’ll soon be fixing that in an upcoming release. Thanks!

  12. Il Ginepraio said on

    Arriva swfIR (swf Image Replacement)

    Si scrive swfIR, ma si pronuncia swiffer, come precisa Jeffrey Zeldman nel post in cui presenta questo nuova tecnica elaborata da suoi collaboratori in Happy Cog che, sfruttando Flash e un pizzico di javascript (meno di 12 kilobyte), consente di elabor…

  13. Daring Fireball Linked List: February 2007 said on

    [...] Says Zeldman: [...]

  14. Cosa si può fare con swfIR? | <edit> - Il blog di HTML.it said on

    [...] Il nome è evocativo, e rimanda immediatamente alla sIFR, la tecnica creata da Mike Davidson per rimpiazzare testo definito nell’HTML con un equivalente in Flash. swfIR fa la stessa cosa, ma invece che testo rimpiazza immagini, il tutto con una combinazione di Javascript non intrusivo, progressive enhancement e Flash (parola di Jeffrey Zeldman).Ciò consente l’aggiunta di particolari effetti alle immagini stesse (ombreggiatura, bordi, rotazione, elasticità), anche dal vivo, ovvero in seguito ad un’azione del visitatore utente (provate a giocare con i checkbox a sinistra dell’immagine centrale della home page). Interessante anche l’esempio dell’header elastico (provate in questo caso a ingrandire le dimensioni del testo con il vostro browser), così come quello degli angoli arrotondati interni. Che ne dite?Una cosa però l’ho realizzata subito e si ricollega alla discussione nata intorno a questo post. Chi vuole lo può usare come mezzo per impedire il salvataggio delle immagini con i mezzi canonici ;). Niente gif trasparenti sovrapposte, niente tasti destri disabilitati… Certo, chi vuole darà un’occhiata al codice HTML, vedrà da dove viene l’immagine, etc, etc, etc, ma queste cose ce le siamo già dette. [...]

  15. Godbit Discussion Forum / swfIR: swf Image Replacement and Accessibility said on

    [...] Has anyone seen/used the new way of handling images with swfIR: swf Image Replacement? This look like a really neat and easy to use way of transforming images in more complex ways than possible with standard HTML. According to Jeffrey Zeldman it supports standards-based design concepts. Is that completely correct when it comes to accessibility? What is the effect on page load times? Does it degrade properly for mobile web users and users without flash?I’m just curious about this new tool because it seems like a neat way of manipulating images. Please share your thoughts He will return… Offline   [...]

  16. Ryan said on

    sIFR has been doing this for header text for a couple years now.

  17. Jeffrey Zeldman said on

    sIFR has been doing this for header text for a couple years now.

    Indeed it has. And that’s why swfIR was named after it. :)

    BTW, the inventors of sIFR will speak for us at An Event Apart Seattle.

  18. 3stripe said on

    I think the concept of degradable and unobtrusive Flash “content blocks” is a real winner, it’s something I’ve been building into a lot of WordPress powered sites recently.

    Look forward to trying this out and seeing the project shape up.

  19. Daniel said on

    I’m sorry, I don’t agree on how “standard-based” this design-concept is. All you do is server-side render something that is standard and then, if possible, client-side replace it with something non standard-based.

    I’d rather see something using SVG for this, in case its enabled by browser or plug-in. I wonder if that exists? Still it would be a hack, but it would be beautiful to switch that hack off as soon as a majority comes with a good browser..

    How much people actually come here without an SVG browser? IE anyone? :)

  20. German Rumm's blog said on

    swfIR flicker fix

    A while ago I wrote about swfIR and the “flicker” bug it has. Several people came to that post through Google looking for a fix, so I decided to write one.

    What’s the problem

    When page loads, images disappear for a fraction of secon…

  21. Newcastle Student Accommodation said on

    I’ve been searching for ages for something similar to this (swfIR), has anyone found anything better? if so please post the links!

Comments off.