Share graphic for “HOW TO: Optimize your .PNG Images” by Joe Levi

HOW TO: Optimize your .PNG Images

.PNG (Portable Network Graphic, pronounced "ping") is a modern graphics format that was created in part to address the "CompuServe Stranglehold on the .gif format" and to update type of images typically stored using the .JPEG format to a lossless format.

.PNGs are lossless by nature and come in two flavors: Lime and Strawberry... er, PNG8 and PNG24.

PNG8 is the most commonly used .PNG format, it's used to replace .GIFs (and does a very good job). The color depth of PNG8 is a bit better than that of .GIF, and both allow for single bit transparency. .PNG does not have a "animated" version like .GIF89a does, so if you want simple frame animations, you're still going to be using .GIF.

.JPEG (or .JPG) is generally used for higher resolution pictures, but it, like .GIF, is a lossey format (meaning image data is lost in the process of compressing). .PNG answers this with the PNG24 format (which also enables alpha-transparency). PNG24 is also lossless, but the alpha-transparency isn't handled properly by Internet Explorer 6 and below (it does work fine with IE7, however).

You can use IE conditional statements to load the "right" image for the right browser, it's not pretty, but seems to allow for the best of both worlds:

   1:  <a id="Logo" href="/" title="BACKYARDS Inc.™">
   2:      [if gte IE 7]><img src="/design/backyards_inc-logo.png" alt="BACKYARDS Inc.™" />[endif]>
   3:      
   4:  a>

Next, .PNG is a compressible format, and it is lossless, which is a very good thing! Unfortunately, tools like PhotoShop don't do all that great at producing compressed .PNGs, but they do fairly well at producing .PNGs in general. So all we need is a tool to compress the .PNGs that our image editors produce for us. Enter PNGcrush.

First, download and install PNGcrush, then, wire it up to a right-click menu to automate the  command-line handling of the crushing. In Windows Vista you fire up REGEDIT, and create the following keys:

[HKEY_CLASSES_ROOT*shellPNGcrush]
[HKEY_CLASSES_ROOT*shellPNGcrushCommand]
Modify the Command key to be this exactly including the quotes: "C:Program FilesPNGCrush.exe" -fix -reduce -brute -d compressed "%1"

(Note, the path and filename to PNGCrush.exe should reflect the name and path of where you placed the PNGCrush executable.)

Now you can right-click on any .PNG file (or group of .PNGs) and they will be compressed and placed in a folder called "compressed" inside the folder where the original .PNG(s) was(were). This is done by the tool so that your original files don't get inadvertently screwed up.

Now go and compress your .PNGs and save bandwidth for your users!

(Thanks to Mike Dopp for converting this for Vista)

← All articles