PNGs, PNGs, and more about PNGs

PNGs are a handy tool for web developers to use when creating websites. There are a lot of misconceptions about them, and I hope to clear the air in this article. We will define what PNGs are, how they differ from JPG and GIF, what the misconceptions are, and finally a little bit on how to get them to behave in IE6.

What are PNGs?

PNG is an image format comparable to JPG and GIF. It stands for Portable Network Graphics. PNG was originally created to eliminate GIFs and provide better compression at a higher quality.

Why not just use JPG and GIF?

Each image format is still around, and thus means they each have their own strengths and weaknesses. JPG is great for photographic images. Images with gradients and lots of colors are great for JPG. GIF on the other hand is great for logos, and images that have large areas of one color. This normally means there is not a wide range of colors and GIF

The major differences between GIF and PNG are the following:

• GIF supports animation and PNGs do not
• PNGs are less supported among browsers than GIFs
• MOST of the time PNG have smaller file sizes
• PNGs have better transparency options which include alpha transparency

Common PNG Misconceptions

The following is a skimmed down list of some of the Misconceptions out there about PNG. Don’t feel bad if you have fallen into these misconceptions as I have as well.

• PNG is great, but I can’t use them because they don’t work in Internet Explorer.
• PNG always has the smallest file sizes.
• PNG is the all-around best format.

I have taken these from a great article on CSS-Tricks titled, Misconceptions about PNG, so please check it out!

IE6 PNG Transparency Fixes

This is probably the biggest reason that PNG has not taken off more than it has. Its support is limited at times and Internet Explorer chokes on them. Actually it really only chokes when transparency is involved. To our relief, there are many easy fixes out there for us to use.

I suggest you read, 5 Easy Ways to Tackle IE6’s Transparency Issues from NETTUTS for more of an in depth description of each of the following.

• Unit PNG Fix
• DD_BelatedPNG Fix
• Twin Helix Fix

Quick Usage:

Unit PNG fix

<!--[if lt IE 7]>
        <script type="text/javascript" src="unitpngfix.js"></script>
< ![endif]-->

DD_BelatedPNG fix

<!--[if IE 6]>
<script type="text/javascript" src="DD_belatedPNG.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('.png_bg');
</script>
< ![endif]-->

Twin Helix Fix

<style type="text/css">
img, div, a, input { behavior: url(/css/resources/iepngfix.htc) }
</style>

That about does it for PNGs. You are all PNGed out I am sure…

Related posts:

1. PNG-8 Alpha Transparency (screencast)
2. Animate Text with jQuery Easing (screencast)
3. Dealing with CSS Font-Sizes
4. Tired of SIFR? Get a Facelift!

Written by Brenley Dueck