How to Optimize PNG files

While working on the design for my CSS Zen Garden, I found myself in the unusual situation of having to use many large PNG files. I needed to do this since my graphics consisted of layers with shadows, transparencies and glows. PNG files are relatively larger than JPEGs and GIFs and if you want to use all the fanfare that png 64-bit offers, it will make them even larger. This post is a combination of tutorials I found on how to reduce png files using a non-destructive technique in Photoshop and then optimize it in Fireworks.


I usually prefer working with png. In addition of being your best choice when high quality images and text are desired, it is also supportedby most browsers.

So this is how we do it.
Take your PNG file go to the menu bar, Image >Adjustment >Posterize, some designers might be resistant to use this effect, but trust me it works.

After you've clicked on Posterize, a dialog box with a slider adjustment will appear. Here you need to be very careful, as you move the slider colors are being discarded reducing the file size. I would recommend having it around 35 to 50.
Next - save your file. Go to File >Save for web and devices...

Now this is optional and could also affect you loading time. Interlace option:
None: It displays the image in a browser only when download is complete.
Interlaced: It displays low-resolution versions of the image in a browser as the file downloads. Interlacing makes download time seem shorter, but it also increases file size.

- Then. Save
Posterizing will make your file size an average of 35% less than just saving it for the web.

An extra step. As most people know, png files come in 8-bit and 64-bit.
Taking your 8-bit png file in fireworks will help optimize you image and allow you display the cool glowing effect with Alpha channels that 64-bit offers.

Open your file with Fireworks. By default your PNG8 is indexed transparency,which equals any transparent GIF. This makes glowing effects very choppy and pixelated on any browser. If you looked at the color palette, the alpha channel is represented by one color chip, and all semi-transparent are flattened into the background color.

However, if we switch from index to alpha transparency, the PNG8 color palette will show a new type of color chips which now represents the semi-transparent colors; in addition of the alpha channel. This is what allows you to have glowing effects with transparencies using PNG8-bit.

With this technique you will successfully be able to render complex graphics and other psd effects on any browsers except IE6 (for which you'll need this PNG hack to get it to work).

.yourselector {
       width:200px;
       height:100px;
       background: url(/folder/yourimage.png) no-repeat;
       _background:none;
       _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
        (src='/folder/yourimage.png',sizingMethod='crop');
      }

Hope you found this tips helpful!