Optimizing 8-bit .png Imagery
To gain a deeper understanding for how the .png imagery you are using works (and how it is put together), you may visit our "Anatomy of PNG Imagery" page on this site for a much more in-depth explanation. If, however, you are simply looking to learn how to optimize the 8-bit .png imagery on your web site, you can apply a number of techniques in effort to reduce the size of those files:
- Make sure that .png is the appropriate file format for displaying your graphic on the Web.
While the 8-bit .png file format tends to produce the smallest file sizes for "drawn" imagery, there are a handful of occasions when the .gif file format will result in smaller file sizes. Also, when dealing with photographs, it is often the case that using the .jpg file format will result in smaller sizes than 8-bit .png. One should evaluate whether 8-bit .png is, in fact, the superior file format to use on an image-by-image basis.
- Pre-size your images to the dimensions you wish to display on your web site.
A common mistake that many web developers will make is to load a graphic on to their web server at very-large dimensions, but then force the display of that graphic into a much smaller area (i.e. 300 pixels high by 200 pixels wide). Failing to re-size one's graphics to the size in which they are being displayed on a web page can result in dramatically larger images for servers and browsers to process, for no good reason.
- Remove any excess colors.
When creating 8-bit .png files for display on the web, many software programs will default to using 8-bit color to display the images. This means that a total of 256 colors (216 on a PC, since Windows reserves 40 colors for other purposes) will be used to create and display the graphics that you see. As is often the case, however, many graphics will not need NEARLY that many colors to be displayed properly on-screen...and reducing the number of colors to 128 (7-bit), 64 (6-bit) or less will typically result in dramatic savings related to file size.
- Avoid the use of interlacing.
For very large images, many web developers have employed a tool called interlacing, which downloads a rough whole image and gradually increases the image's clarity, instead of downloading from the top of the image and moving downward as is typically done. While this is effective in letting a site's visitors know that "something is coming," it will typically add to an image's overall size and download/display time.
- Experiment with various compression methods and strategies.
In a process we've affectionately referred to as "defragmenting one's graphics" while presenting workshops across North America, one can often greatly reduce the size of an 8-bit .png file simply by experimenting with different methods for storing the image's data, along with concatenating all of an image's IDAT data into a single chunk. This is a technical process, but fortunately there are tools available which make it easy for your average graphic or web designer to perform these steps.
Tools that will allow you to complete these techniques:
Adobe Photoshop (Mac/Windows): Cost: $$$$ | Quality: B+ | Ease of Use: C | Use With: 1, 2, 3, 4
AdvDef/AdvPNG (Mac/Windows/DOS/GNU/Linux): Cost: Free | Quality: A | Ease of Use: B | Use With: 3,5
DeflOpt (Win32 Command Line): Cost: Free | Quality: A- | Ease of Use: B | Use With: 3, 5
ImageMagick (Mac/Windows/Unix): Cost: Free | Quality: A- | Ease of Use: B | Use With: 1, 2, 3
ImageOptim (Mac): Cost: Free | Quality: ? | Ease of Use: ? | Use With: 3, 5
OptiPNG (Windows/DOS): Cost: Free | Quality: A- | Ease of Use: B | Use With: 3, 5
Pngcrush (DOS/Unix/Linux): Cost: Free | Quality: B+ | Ease of Use: B | Use With: 3, 5
PNGCrusher (Mac): Cost: Free | Quality: Unknown | Ease of Use: Unknown | Use With: 3, 5
PngOptimizer (Windows): Cost: Free | Quality: A | Ease of Use: A | Use With: 1, 5
PNGOUT (Win32 Command Line): Cost: Free | Quality: A- | Ease of Use: B | Use With: 3, 5
PNGOUTWin (Windows): Cost: $ | Quality: A- | Ease of Use: A | Use With: 3, 5 [review]
PNGPress (Mac): Cost: Free | Quality: ? | Ease of Use: ? | Use With: 3, 5
PNGREWRITE (Win32 Command Line): Cost: Free | Quality: A- | Ease of Use: B | Use With: 3, 5
PngThing (Mac): Cost: Free | Quality: ? | Ease of Use: ? | Use With: 3, 5
punypng (Online): Cost: Free | Quality: A | Ease of Use: A | Use With: 3, 5
xat.com Image Optimizer (Windows): Cost: $ | Quality: A- | Ease of Use: A- | Use With: 1-5 [review]
To achieve the maximum compression results for your .png files, you should obtain PNGSlim, which combines the following five optimization processes for the absolute smallest file sizes:
- OptiPNG (a run command that looks like this: "optipng -o7 *.png" (can be run as a batch on a directory)
- AdvDef/AdvPNG (a run command that looks like this: "advdef -z4 *.png" (can be run as a batch on a directory)
- PNGOUT (a run command that looks like this: "pngout /ks [filename].png"