PNGExtra – Sample Icon-sized PNG File

Icon-sized PNG (icon)

When an image is made smaller, many of the unseen “extras” within the resulting PNG file can still be just as large, constituting a greater percentage of waste. Typical icon-sized PNG files will benefit the most from optimization by PNGExtra.

Sample Icon-sized PNG File

This is a fairly typical icon-sized graphic image that one might see on any website:

Original 80x80 icon-sized PNG file
  • File name: IanLogo80x80.png
  • Image size: 80 x 80 pixels
  • File size: 5,713 bytes

It's actually common for PNG files to be quite small because they are used for graphic images like logos, charts, arrows, push buttons, controls and other navigation elements.

The image itself may be small, but let's peek inside the PNG file...

Revealing What's Inside

Extras within 80x80 icon-sized PNG file

Decoding the innards of the icon-sized PNG file reveals almost the identical amount of “extras” (or “metadata”) as existed in the larger image:

  • Header: Required PNG signature plus header information at start of file.
  • pHYS: Physical pixel dimension information.
  • gAMA: Gamma information.
  • cHRM: Chromaticity information.
  • iCCP: ICC Color Profile for more accurate color rendition on different systems (eg. screens, printers). Ignore the actual “rainbow”, which I only added to show that this block has something to do with color.
  • Main image: Finally, after all of the “extras”, we reach the actual image data.

Whereas the larger image contained 35% of “extras”, this icon-sized PNG file contains a much greater 47% of waste. I've seen some with more than 99%!

NOTE: The sizes of the “blocks” in the above image represent their relative sizes within the file, with the important sections colored with green borders and the “extras” colored with yellow borders. It's easy to see that about half of the file is “waste”.

PNGExtra to the Rescue!

Clean 80x80 icon-sized PNG file after optimizing with PNGExtra

Here's the innards of the same icon-sized PNG file after optimization with PNGExtra. As with the larger image, all of the “extras” (15,169 bytes) have been cleanly removed.

Imagine how much faster a web page would load if each image loaded in less than 1/4 of the time?