PNG formats: 32-bit, 24-bit or 8-bit

I recently found myself scratching my head trying to figure out the different PNG formats found in Photoshop and Fireworks. Photoshop has two options: PNG-24 and PNG-8. Fireworks on the other hand appears to have these plus an additional option called PNG 32. So are Fireworks 32-bit PNG files higher quality then Photoshop? Actually they are not.

The Photoshop PNG-24 and the Fireworks PNG 32 are pretty much the same thing only labeled differently. It's confusing especially since both programs are Adobe products so you would think they would use the same naming conventions. In any case, the difference is in how they refer to the alpha channel which gives the file trancparency. The 8 extra bits in Fireworks PNG 32 fies represent the alpha channel so these files is really 24bit color with an 8bit alpha channel. This is why when you select PNG 24 in Fireworks there is no option to use trancparency. Photoshop on the other hand uses the PNG-24 label to refer to both transparent and non-tranparent PNGs and instead of calling the two different names, just has a checkbox to turn the alpha channel on or off. So in the end it's the same thing just two different ways of presenting it.

Where Fireworks has the upper hand is actually on the smaller PNG files refered to as PNG 8. Unlike Photoshop, Fireworks offers two types of tranceparency for PNG 8: Index Transparency and Alpha Transparency. Think of Index Transparency like the old tranparent Gif files that had the rough edges while the Alpha Transparency is more like what you would see in a higher quality PNG file. The real difference is that Alpha Trancparency supports semi tranparent objects and colors while Index Tranceparency shows pixels as either fully transparent or fully opaque. Unfortunately Photoshop does not offer this option so for 8-bit PNGs making Fireworks the obvious choise in this area.

One thing to note however is that not all graphics will look good compressed to 8-bit. In particular you want to be careful of large detailed photos and gradients (especially tranparent ones) which require more color information to display nicely. For icons and graphics with few colors, using 8-bit PNGs can greatly reduce the size of your web graphics so use it where you can but don't just compress all of your graphics and assume they will look perfect when rendered in the browser.