I have preferred PNG over GIF and JPEG for sometime now.  It isn’t that I’m an expert on image types, but I know that PNG files are generally smaller in size than GIF and they have consistently rendered nicely for me in Firefox and IE, so I stick with them.  

With this said, my faith in PNG had been shaken since working with Windows Live Writer.  If you have ever tried to insert an image into a post using Windows Live Writer you know that PNG is not included in their default  filter.  At first, I just got really frustrated because it took an extra click to get my job done.  Under my breath I’d curse the Windows Live Writer development team and say, “I don’t care if it is a beta release or not, somebody seriously messed up here.  How could a legitimate web-related product not automatically include PNG in their image list? ”  After a dozen or so posts, however, I started to doubt myself.  And I started doubting PNG.  After all I’m not a graphic designer (nor a web designer for that matter.)  Maybe I’m simply oblivious to the very good reason why Windows Live Writer is causing me such heartache.

Tonight I went looking for answers and I now believe my frustration has merit.  I didn’t realize it, but, Internet Explorer (like Windows Live Writer) has never fully-supported PNG and this has caused quite a lot of commotion amongst the web design community for some time now.  As I understand it, there are three arguments included in the petition for Proper PNG Support in Internet Explorer for Windows:

1. PNG is Superior to the GIF
When the same image is saved in both PNG and GIF formats, in an editor with full and proper support for both formats, the PNG image is typically a smaller file size, is free from royalties, patents, and copyright restrictions that hinder the GIF format, and can use more than 256 colors – up to 48-bit color.

2. PNG is a World Wide Web Consortium (W3C) Recommendation

Microsoft has repeatedly stated their renewed commitment to web standards, so implementing full PNG support would be the next logical step in fulfilling this promise, especially since it was supposed to be implemented over 10 years ago.

3. PNG Supports Alpha Transparency
Anybody who has designed images for use online knows the woes of trying to make that image appear smooth on any background. Some designers create different images to be used on different background colors, other designers simply leave the edges jagged, and still others just give their images a solid background. It’s a bad way to go, but it’s the only choice right now. Using PNG images with alpha transparency would eliminate all of these problems, and make the work of web designers a lot easier. 

To further explain the difference between PNG Alpha transparency and GIF transparency, a GIF image pixel is 100% transparent or 0% transparent. There is no middle ground which tends to lead to grainy-looking graphics in some cases.  Alpha transparency, on the other hand, allows for pixel transparency to range from 0% to 100%.  This allows one to blend images together much easier and create a more seamless look.

There’s some really great information on this subject available here and  here   Now that I know more about its history, the added PNG support with IE7 is worth mentioning.  Of course, I’m hopeful that the Windows Live Writer team will be influenced as well and I’m a just few clicks away from having my favorite image type included in the default filter with WLW’s next release.

12 Comments to “IE7 Support For Alpha Transparency In PNG Files”

  1. It’s good to have it in IE7 but there will be still lots of IE6 users left so we can’t really use transparent pngs already. It’ll take at least 1-3 years until everyone is on Vista and got IE7 right from the beginning.

    On the other hand there’s also the possibility of not to care about IE6 users ;)

    Cheers
    Andreas

  2. If you don’t have PNG files in your insert image dialog, then you are running an old version of Writer, please upgrade. The WL Writer update that went out about a month ago added PNG to the filter in the Insert Image dialog. PNG was just left out of the original WL Writer insert image dialog. PNG has always been supported if you dragged a PNG file into the editor, or flipped the image filter to All Files. PNG support in Writer was a big focus, it was just a small bug that it got dropped out of the insert image dialog in the original beta release.

  3. bgriswold says:

    You have a valid point, but there’s a solution (or at least a workaround) for every problem. I found this hack last night while researching. It’s been getting designers around the problem and it should still help out until users shift to IE7 (which has caused us some of our existing applications heartache already.)

  4. bgriswold says:

    I guess I really blew it, Spike. This was a big oversight on my part. I know I checked for an update recently, but, I guess, time really flies. I’ve upgraded from Beta Version 1 (109) to Version 1 (145) and PNG support is there. I downloaded from here without any problems. Thanks for the comment and the help. You’ve made my day.

  5. apok says:

    The only wise solution is to stop using IE, and start using other browser like Firefox, Opera or Safari. Not only for the png full support they provide, but also cause they’re quicker and more reliable.

  6. Ben says:

    Thanks for the feedback, apok. Though I believe many developers have started migrated over to Firefox, I don’t think the same can be said for the majority of end users. I think we’re stuck for now.

  7. Peter says:

    I’m at a loss here. Why would anyone use GIF images except for small icons? PNG graphics are un-necessarily wasteful – you can forget anyone looking in a a dialup or mobile connection with large PNG graphics. I’m trying and failing to find how to ensure Live writer outputs images as high quality JPG images… can anyone point me in the right direction? (I’m pasting images in).

  8. Johan says:

    Some times PNG images are smaller than GIF/JPEG and is required for alpha transparency. There are many fixes for IE6 including http://jquery.andreaseberhard.de/pngFix/

  9. I have been exploring for a little for any high quality articles or weblog posts in this sort of house . Exploring in Yahoo I finally stumbled upon this site. Reading this info So i am happy to express that I’ve an incredibly just right uncanny feeling I found out just what I needed. I most no doubt will make certain to do not forget this site and give it a glance on a relentless basis.

  10. Thanks, I have just been searching for information approximately this topic for a long time and yours is the greatest I have found out so far. However, what about the bottom line? Are you sure in regards to the source?

  11. High-quality having traveling to ones blog page once more, it is several months for me. Competently these facts which has been previously been extended to wait patiently to generate such a long time. We’d like this sort of write-up as a way to finish our own voyage indoors a college degree, as well as the same motif together with write-up. With thanks, beneficial boost.

  12. Thanks for every other fantastic post. The place else could anyone get that kind of information in such an ideal means of writing? I have a presentation subsequent week, and I’m at the look for such information.

Leave a Reply

You can wrap your code with [ruby][/ruby] or [python][/python] blocks for syntax highlighting and you can use these traditional tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>