PNGExtra – Sample Icon-sized PNG File
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:
- 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
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 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".