July 22, 2005

Optimizing PNG Images

I generally like PNG files better than GIF images for use on the web. PNG files seem to have more utilities to get a better compression ratio out of them then GIF files do. Here is the process I’ll go through on a Windows machine to get a tight PNG image to use on the web:

  1. Save an optimized 8-bit PNG image from your photo/illustration software.
  2. Drop to a command prompt, and run pngrewrite on the file. You need to output to a second file, like this:

    pngrewrite image1.png 2.png

  • Run OptiPNG on the new PNG file you just created in the last step. I always run the highest optimization level, which finds the best settings and really doesn’t take too long:

    optipng -o7 2.png

  • IE renders the gamma setting in PNG files differently than most other browsers. I think some versions of Opera do as well. You may have noticed this if you’ve ever had trouble matching a background color in a PNG file with a background color on your web page. You can fix this by taking out the gamma chunk within the PNG image. To do this, open the file in TweakPNG, delete the chuck that contains “file gamma = (some number)” in the Contents. Save the file.

Rename your second PNG file you created in step #2 to whatever you want, and you have your new, streamlined PNG file ready to be uploaded.

Add a Comment