PNGExtra – Sample PNG File
To demonstrate what PNGExtra does and why it's needed, let's look inside a typical PNG file to see the types of "extras" (or "metadata") and how PNGExtra can optimize such files by cleanly removing those extras.
Sample PNG File
This is a fairly typical graphic image that one might see on any website:
- File name: IanLogo240x240.png
- Image size: 240 x 240 pixels
- File size: 7,786 bytes
The image is my personal "IAN" logo. It has a limited number of colors, plus it has edges with sharp contrasts, making it an ideal candidate for saving as a PNG file.
The problem is not what we CAN see but what we CAN'T see. Let's take a peek inside the file...
Revealing What's Inside
Decoding the innards of the above sample PNG file reveals all sorts of "extras" (or "metadata"):
- 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 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.
This PNG file contains about 35% of "extras", the bulk of which are downloaded and then simply discarded by most web browsers. It's a real waste!
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 1/3 of the file is waste.
PNGExtra to the Rescue!
Here's the innards of the same PNG file after optimization with PNGExtra:
- Header: The header is still there, completely unchanged.
- Main image: The image is still there, completely unchanged.
- Extras? All of the extras (2,710 bytes!) have been cleanly removed.
On this sample, PNGExtra achieved savings of 35%, which is impressive, but quite realistic. Studying PNG files from other websites, I've seen far more wasteful examples.
On smaller images, even more impressive savings are common because the "extras" constitute a greater percentage of the