Optimize PNG Image

As part of Android programming, or any software development, there is always a need to create or customize images. In mobile programming, PNG images are normally used as it supports lossless data compression.

In order to optimize the size of PNG images, there are tools that we can use, e.g.

Here is a scenario to show how much bandwidth we can save by using these tools. In this example, I have a PNG image which is 21k originally. Below is the metadata information shown using PngCrush.

You can see that the IDAT chunk before optimizing in the displayed information.

 | pngcrush 1.7.55
 |    Copyright (C) 1998-2002, 2006-2013 Glenn Randers-Pehrson
 |    Portions copyright (C) 2005       Greg Roelofs
 | This is a free, open-source program.  Permission is irrevocably
 | granted to everyone to use this version of pngcrush without
 | payment of any fee.
 | Executable name is pngcrush
 | It was built with libpng version 1.6.1rc01, and is
 | running with  libpng version 1.6.1rc01 - March 21, 2013

 |    Copyright (C) 1998-2004, 2006-2013 Glenn Randers-Pehrson,
 |    Copyright (C) 1996, 1997 Andreas Dilger,
 |    Copyright (C) 1995, Guy Eric Schalnat, Group 42 Inc.,
 | and zlib version 1.2.7.1, Copyright (C) 1995 (or later),
 |    Jean-loup Gailly and Mark Adler.
 | It was compiled with gcc version 4.8.0 20121031 (experimental).

Opening file 1.png for length measurement
Allocating read structure
Allocating read_info,  end_info structures
Reading IHDR chunk, length = 13.
Reading sRGB chunk, length = 1.
Reading gAMA chunk, length = 4.
Reading pHYs chunk, length = 9.
Reading tEXt chunk, length = 26.
Reading IDAT chunk, length = 20958.
Reading IEND chunk, length = 0.
Destroying data structs
   Recompressing 1.png
   Total length of data found in critical chunks =    21015


ENTERING MAIN LOOP OVER 150 METHODS
Allocating read and write structures
Allocating read_info, write_info, end_info structures
Initializing input and output streams
 Check the palette
Reading info struct
Transferring info struct
   IHDR chunk data:
      Width=512, height=512
      Bit depth =8
      Color type=6
      Interlace =0
   Setting IHDR
   gamma=0.454550
Handling 1 tEXt/zTXt chunks before IDAT
0  Software: Paint.NET v3.5.10
Found 0 unknown chunks
Finished handling ancillary chunks after IDAT

Begin interlace pass 0
Reading and writing end_info data
Destroying data structs


FINISHED MAIN LOOP OVER 150 METHODS


   CPU time decoding 0.010, encoding 0.000, other 0.030, total 0.040 seconds

Using PngCrush with the default options, after optimizing the size now becomes 15k, and the metadata is shown below.

 | pngcrush 1.7.55
 |    Copyright (C) 1998-2002, 2006-2013 Glenn Randers-Pehrson
 |    Portions copyright (C) 2005       Greg Roelofs
 | This is a free, open-source program.  Permission is irrevocably
 | granted to everyone to use this version of pngcrush without
 | payment of any fee.
 | Executable name is pngcrush
 | It was built with libpng version 1.6.1rc01, and is
 | running with  libpng version 1.6.1rc01 - March 21, 2013

 |    Copyright (C) 1998-2004, 2006-2013 Glenn Randers-Pehrson,
 |    Copyright (C) 1996, 1997 Andreas Dilger,
 |    Copyright (C) 1995, Guy Eric Schalnat, Group 42 Inc.,
 | and zlib version 1.2.7.1, Copyright (C) 1995 (or later),
 |    Jean-loup Gailly and Mark Adler.
 | It was compiled with gcc version 4.8.0 20121031 (experimental).

Opening file 2.png for length measurement
Allocating read structure
Allocating read_info,  end_info structures
Reading IHDR chunk, length = 13.
Reading gAMA chunk, length = 4.
Reading sRGB chunk, length = 1.
Reading pHYs chunk, length = 9.
Reading tEXt chunk, length = 26.
Reading IDAT chunk, length = 15132.
Reading IEND chunk, length = 0.
Destroying data structs
   Recompressing 2.png
   Total length of data found in critical chunks =    15189


ENTERING MAIN LOOP OVER 150 METHODS
Allocating read and write structures
Allocating read_info, write_info, end_info structures
Initializing input and output streams
 Check the palette
Reading info struct
Transferring info struct
   IHDR chunk data:
      Width=512, height=512
      Bit depth =8
      Color type=6
      Interlace =0
   Setting IHDR
   gamma=0.454550
Handling 1 tEXt/zTXt chunks before IDAT
0  Software: Paint.NET v3.5.10
Found 0 unknown chunks
Finished handling ancillary chunks after IDAT

Begin interlace pass 0
Reading and writing end_info data
Destroying data structs


FINISHED MAIN LOOP OVER 150 METHODS


   CPU time decoding 0.014, encoding 0.000, other 0.036, total 0.050 seconds

Using OptiPNG with default options, the image is optimized to be 11kb, and the metadata information is shown below.

 | pngcrush 1.7.55
 |    Copyright (C) 1998-2002, 2006-2013 Glenn Randers-Pehrson
 |    Portions copyright (C) 2005       Greg Roelofs
 | This is a free, open-source program.  Permission is irrevocably
 | granted to everyone to use this version of pngcrush without
 | payment of any fee.
 | Executable name is pngcrush
 | It was built with libpng version 1.6.1rc01, and is
 | running with  libpng version 1.6.1rc01 - March 21, 2013

 |    Copyright (C) 1998-2004, 2006-2013 Glenn Randers-Pehrson,
 |    Copyright (C) 1996, 1997 Andreas Dilger,
 |    Copyright (C) 1995, Guy Eric Schalnat, Group 42 Inc.,
 | and zlib version 1.2.7.1, Copyright (C) 1995 (or later),
 |    Jean-loup Gailly and Mark Adler.
 | It was compiled with gcc version 4.8.0 20121031 (experimental).

Opening file 1.png for length measurement
Allocating read structure
Allocating read_info,  end_info structures
Reading IHDR chunk, length = 13.
Reading sRGB chunk, length = 1.
Reading gAMA chunk, length = 4.
Reading pHYs chunk, length = 9.
Reading tEXt chunk, length = 26.
Reading IDAT chunk, length = 10252.
Reading IEND chunk, length = 0.
Destroying data structs
   Recompressing 1.png
   Total length of data found in critical chunks =    10309


ENTERING MAIN LOOP OVER 150 METHODS
Allocating read and write structures
Allocating read_info, write_info, end_info structures
Initializing input and output streams
 Check the palette
Reading info struct
Transferring info struct
   IHDR chunk data:
      Width=512, height=512
      Bit depth =8
      Color type=4
      Interlace =0
   Setting IHDR
   gamma=0.454550
Handling 1 tEXt/zTXt chunks before IDAT
0  Software: Paint.NET v3.5.10
Found 0 unknown chunks
Finished handling ancillary chunks after IDAT

Begin interlace pass 0
Reading and writing end_info data
Destroying data structs


FINISHED MAIN LOOP OVER 150 METHODS


   CPU time decoding 0.005, encoding 0.000, other 0.023, total 0.028 seconds

Obviously with the help of these tools, PNG images can be optimized efficiently, and let’s say you have lots of images, you can definitely benefit from the use of these tools.

You can leave a response, or trackback from your own site.

Leave a Reply

Powered by WordPress