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).
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.
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:
- 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.
- 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:
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.
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.