Joe Levi:
a cross-discipline, multi-dimensional problem solver who thinks outside the box – but within reality™

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.&trade;">
   2:      <![if gte IE 7]><img src="/design/backyards_inc-logo.png" alt="BACKYARDS Inc.&trade;" /><![endif]>
   3:      <!--[if lt IE 7]><img src="/design/backyards_inc-logo.gif" alt="BACKYARDS Inc.&trade;" /><![endif]-->
   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)

Share

You may also like...

4 Responses

  1. Dan Walker says:

    Just wanted to correct the misinformation about PNG-8 files, which is every present on the net, that they can only have one level transparency as gifs. Fact is PNG-8 files can have full alpha transparency. Fireworks can generate them. I use them and they produce great drop shadows that work in IE7 and FF. Here is the Adobe link that explains PNG-8 with alpha transparency. http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14647&sliceId=1. The one problem is that the standard htc fix for PNG-24 transparency in IE6 does not seem to work with PNG-8 alpha transparency. If anyone knows how to make that happen, I would be very interested.

  2. Joe says:

    Dan, thanks for the pointer. I was particularly interested in this line from the article that you mentioned: “8 bit PNG files can also be saved with a transparent Alpha if they are saved with a 32 bit color palette.”

    This is where the confusion, I think, is coming in to play. In the beginning there were two types of PNGs: one to address GIF style images (with index transparency and a 256 color pallet), and another to address JPEG style images (with millions of colors in its pallet, but no transparency).

    PNG8 was meant to “replace” GIF, and PNG24 was meant to replace JPEG. GIFs, having a smaller color pallet than JPEG, were used for small, low-detail images (in comparision to JPEGs). JPEGs were used to convey photo-realisitic pictures.

    PNG24 hasn’t done as well as PNG8 in replacing the respective competing image formats, primarily because PNG24 images are typically larger in file size than their JPEG counterparts (in my experience).

    So, the point of my confusion is, if the advantage to PNG8 is small file-size (when compared to PNG24), wouldn’t a PNG8 with a 32bit (rather than 256) color pallet end up just as large as a PNG24? And what does the 24 stand for? I always thought was 24 bit. Also, why doesn’t Photoshop have a 32-bit color pallet for PNG8 images in their “save for web” dialog?

    In any event, you pointed me to a good resource and educated me about PNGs, and for that I thank you! 🙂

    -www.JoeLevi.com

  3. Dan Walker says:

    PNG8 saved with alpha transparency from Fireworks are much smaller than the analgous PNG32 with alpha transparency. I have both Fireworks CS3 and Photoshop CS3. Fireworks is a far superior tool for web design and web graphics optimization.

  4. Joe says:

    I’ll have to check into that… Thanks again for the info, Dan!

    http://www.JoeLevi.com

Leave a Reply