Optimizing PNG Files, for both Web and Print.

September 16th, 2009 by admin · 2 Comments

The script included in this post can shrink your images down for easy handling.

Optimizing images is not only important for web applications, it is also important for reducing the size of print documents (e.g. Word Documents, PDFs, etc). This size is important not only when emailing them out, but also when embedding them into documents that you will be sharing with others.

PNGs should be used for drawn images and screenshots (for photographs, it is better to use the JPEG file format).  It uses a lossless compression algorithm, so what you save in your graphics editor is exactly what your users will see.  It also supports features like alpha channeling.

This article will show how to optimize images in this format.

A case study: Optimizing Screenshots

There are many times a web developer will need to produce screenshots of the work they do to send to clients. When I need to do this, I use the excellent Screengrab Firefox Addon, since it is so easy to use. I will first talk about how to take screenshots using this tool, and in the next section, talk about how to optimize the PNG files they produce. (Note: If you need to take screenshots using Internet Explorer, I would suggest using The GIMP’s screenshot feature to do this. There is a great simple tutorial on how to do screenshots with the GIMP at the The Networked Writing Environment at the University of Florida website).

Using Screengrab

After you install this tool, all you have to do is right click the document you want to take a screenshot of and you will get the following menu.


Right-click any web page
to produce a screen capture of any page.

How to reduce image data size

I created a script that would reduce this file size as much as possible. How does this script work:

  1. It first uses ImageMagick to reduce the amount of colour-palette inside the image to 256, since Screengrab will usually create 16-bit images (which have millions of colours). This usually results in 25% reduction of the size of the image and the extra colours aren’t missed when these images are inside a Word Document because the physical dimensions of these images are smaller than the actual page itself.
  2. It then uses two command line tools, optipng and advpng, to compress the image further. It uses these programs in a variety of ways to see which is the most optimal, and saves the smallest result. This usually results to a further 30-40% reduction is data size.

Together, it is possible to reduce an image to 50-70% of it’s original size. Not bad for a script done in my spare time.

An archive with this script and supporting files is available here. This archive includes:

  • reduceColours: the script that reduces the images to 256 colours.
  • compressPng: the script that optimizes the PNG image
  • optimizeImagesForPrint: the script that executes reduceColours and compressPng in one step.
  • optipng.exe and advpng.exe, the actual file compressors used by compressPng.

Note that in order to use this script under Windows, you must have Cygwin installed on your machine. If you don’t know how to do this, read Installing Cygwin. Make sure you install ImageMagick using the Cygwin installer, since is needed for the reduceColours script.

If you run Mac OS X, Linux, FreeBSD or any other UNIX variant, you should be able to run this script as long as you are comfortable with the command line.  Note that you will have to download optipng and advpng separately, since the archive only contains the Windows binaries of these programs.

To run the optimizer, use the following syntax inside a bash shell:

optimizeImagesForPrint <imageList>

It will create a directory called optimized that will contain all the optimized images. If you just want to reduce the images to 256 colours, or optimize 16-bit images without reducing the colours, use reduceColours and compressPng in the same manner.

Conclusions

Even though this article has focused on embedding PNG images into documents, the ideas here can be used when optimizing PNGs for the web. There may be cases where you don’t want to reduce the amount of colours — feel free to change the script to do that.

Please let me know if you find any bugs or if you find other/better ways to optimize images.


The scripts are available here in a handy zip archive
.

Tags: Images · , ,

2 responses so far ↓
  • 1 Oliver // Sep 28, 2009 at 2:04 pm

    OptiPNG is a pretty magical tool, and perfect for batch processing. When I’m editing single images, though, I find that the GIMP already optimizes PNGs pretty well, sometimes within a percentage point or two of OptiPNG’s best (-o7), especially on smaller files. GIMP seems to save quite a lot faster than OptiPNG, too.

    Before I knew about OptiPNG, GIMP helped me slim down several PNGs from (AFAIK) Photoshop. Each had only 448 pixels, but they were somehow using 38KB each! They trimmed down nicely to a couple hundred bytes each. I’m not sure where the extra 99% of the space was being used, but I’m glad it’s gone now.

    Both are great tools to have in the toolbox. If I had another batch of images to trim, I’d probably use OptiPNG.

  • 2 Brian Tao // Sep 30, 2009 at 9:52 am

    If you’re running Windows Vista or 7 and want to produce really snazzy screencaps that include the Aero Glass effects, Window Clippings (http://windowclippings.com/) is a great utility. It correctly captures the alpha channel of translucent window chrome, rounded corners, and drop shadows.

    I don’t know if I can embed images in comments here, but here’s a sample PNG: http://luxography.ca/tmp/alpha_channel_screenshot.png

Give Feedback

Don't be shy! Give feedback and join the discussion.

Please Note: If you are asking for help using the information on this page or if you are reporting a bug with the code featured here, please include a URL that shows the problem you are experiencing along with the browser/version number/operating system combination where the issue manifests itself. Without this information, I may not be able to respond.

An orange star denotes a required field.