Optimizing 24-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 24-bit .png imagery on your web site, you can apply a number of techniques in effort to reduce the size of those files:

  1. Make sure that .png is the appropriate file format for displaying your graphic on the Web.
    While the 24-bit .png file format tends to produce the smallest file sizes for "drawn" imagery, it is often the case with photos and scans where the .jpg file format will result in smaller file sizes. Many true color images containing text and sharp color transitions will result in smaller files sizes in 24-bit .png versus .jpg, and will often provide the best quality imagery. However, maps, charts and diagrams using more than 256 colors tend to be the ideal application for 24-bit .png. One should evaluate whether 24-bit .png is, in fact, the superior file format to use on an image-by-image basis. Another thing to be very cautious of is 24-bit .png support on the web browsers that a large majority of your constituents use to view your site's content! 24-bit .png is not yet universally supported by all web browsers, to our knowledge.

  2.  
  3. 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.

  4.  
  5. Remove any excess colors.
    When creating 24-bit .png files for display on the web, many software programs will default to using full 24-bit color to display the images. This means that a total of 16,777,216 colors 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 16-bit (65,536 colors), 12-bit (4,096 colors), 8-bit (256 colors) or less will typically result in dramatic savings related to file size.

  6.  
  7. 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.

  8.  
  9. 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 a 24-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:

  1. PNGREWRITE
  2. OptiPNG (a run command that looks like this: "optipng -o7 *.png" (can be run as a batch on a directory)
  3. AdvDef/AdvPNG (a run command that looks like this: "advdef -z4 *.png" (can be run as a batch on a directory)
  4. PNGOUT (a run command that looks like this: "pngout /ks [filename].png"
  5. DeflOpt


 
  Four Examples
 
 
 
    Other:
  Samples on Site
  Samples on Blog