PNG problem for IE – SOLVED?!

Ever since the dawn of time, web designers have forever cherished the image file format entitled “Portable Network Graphics image”—or PNG, for short. They delighted at it’s 24-bit transparency capabilities—which blew the water out of anything GIF had to offer. But low and behold; for Microsoft hath resolv’d to ignore yonder file format and not include it in it’s ever popular web browser—Internet Explorer! Panic strikes into the hearts of well-meaning web designers, as their newly found image format will not display correctly in IE! What will they do now?

Fortunately, some PHP wizard came up with a fix. Now is that cool, or what?

7 responses to “PNG problem for IE – SOLVED?!”

  1. Wow, seriously cool. I have seen various “solutions” to that problem over the years but don’t remember if they worked this well.

  2. First of all, I hate how 24 bit transparent PNG files are so big. There’s no compression, ya know? A simple 300×300 image could be like 250K, where a jpeg of the same thing is only 30K. This is one of the big things that makes them impractical for web use.

    So anyways, here’s one of my fun little PNG workarounds I have discovered and used in the past. Heck, you can even do it yourself fairly easily!

    Tools needed:
    1. Photoshop, the GIMP, or equivalent image editing tool
    2. Macromedia Flash MX (the editor, not the plugin)
    3. HTML editor of some sort

    Follow these steps to create a transparent PNG file:
    1. Open up photoshop and create a new 500×500 pixel (72 dpi) image with a transparent background
    2. Create a new layer and scribble, draw, or write random things all over it. Make sure that there are plenty of blurred edges and semi-transparent things showing through to the next layer.
    3. Click File > Save for Web.
    4. Under the Settings drop-down of presets, select “PNG-24” and make sure “Transparency” is checked. For the image, you should see a white and gray checkerboard pattern with your scribbles and what not overlaying it.
    5. Save file off as “testimage.png”

    Ok. Now go right click on that file in windows explorer and view the properties. Mine was over 200K. Geez! Definitely in need of compression or something!!!

    On to the next step:
    6. Open up the Macromedia Flash MX editor.
    7. Create a new document and set the size to 500×500 pixels.
    8. Go up to File > Import and open the “testimage.png” file we created earlier.
    9. Go to File > Save As and save the document as “testimage.fla”.
    10. Go to File > Publish Settings.
    11. On the Formats tab, we only need the Flash (.swf) and HTML (.html) items checked.
    12. On the Flash tab, the default settings should be ok, but you may want to adjust the JPEG quality up to like 75 or something.
    13. On the HTML tab, select “Flash Only” from the template drop-down, and set your window mode to “Transparent Windowless”. (**THIS IS VERY IMPORTANT!!! DO NOT LEAVE OUT THIS STEP!**)
    14. Click the Publish button.

    Ok. Done! Now close out of there, save the testimage.fla file, close out flash, whatever…
    Go back to windows explorer and look at the folder where you saved testimage.fla.
    You should see two new files: testimage.swf, and testimage.html.

    Open up testimage.html in your web browser (either IE or Firefox, preferably).
    Bam! There you have it! Your PNG file still has all its transparency, yet it displays perfectly in 98% of all the web browsers out there (basically anyone who has the flash plugin). And to top it off, it has JPEG compression as well. Check it out, right-click on testimage.swf and look at your properties. Wow! Only around 100K (as opposed to over 200K as a plain PNG)

    Try putting a tiling background image of some sort in the testimage.html file to see how the alpha transparency works. You can also put the flash in a DIV or SPAN on it’s own layer above everything else and it’ll work great, too.

    To see an example of the finished result, Click Here!

    Some of the added niftyness of doing PNG files this way is that you now have complete and utter control over the image. You could use the flash editor to do everything from fading it in, to displaying a percentage bar while the image loaded.

  3. Wow, Tommy, thanks. I wasn’t sure if flash JPG compression would actually compress PNGs before – now I have a reason to cherish the 24-bit PNG! Now we can mask photos and have JPG compression!

  4. Neat! Too bad I don’t have Flash MX 😉

    That must be the longest WordPress comment in the existence of WordPress!

  5. Hehe… sorry bout that.

    I just figured if I was gonna say something, I oughta say it right.
    Maybe I need to fix it all up professional and add it to a tutorial section on my home page or something.

  6. True. I think I may have already done that. I probably fooled with it for about five minutes and went on and forgot about it. Maybe I can get the OS X version from Chris. It’d be nice if I really learned the program. Flash skills are good skills to have.

    By the way, I don’t think PNG image size is such an issue, because most people are getting/have broadband internet now, and when you really think about it 200k isn’t all that much.
    Still, it’s good to have a website that works with people using older technology.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.