Anatomy of PNG Imagery
Have you ever wondered how a computer can take millions of zeros and ones and arrange them in such a way as to display a picture on a web page? I think that process is an absolute marvel of technology that each of us takes for granted on a daily basis...along with the human body, the power of flight, and any number of other things.
Specifically related to .png imagery, a computer is processing the following information in order to display the final images on your screen:
1. IHDR - Image header. The chunk which MUST come first in order for the image to display properly, and is comprised of the following information:
- Width: 4 bytes
- Height: 4 bytes
- Bit depth: 1 byte
- Color type: 1 byte
- Compression method: 1 byte
- Filter method: 1 byte
- Interlace method: 1 byte
- 13 total bytes of information
2. PLTE - Palette. Red, Green and Blue (1 byte of data for each of those three colors)
3. IDAT - The chunk in which the actual image data is stored.
4. IEND - The end of every image file, which contains zero bytes of data.
5. tRNS - Transparency specifications.either simple (one color) or complex (alpha).
6. gAMA - Specifies the relationship between the image samples and the desired display output intensity as a power function.
7. cHRM - Chromaticities.
8. sRGB - Used with images that conform to the standard RGB color space.
9. iCCP - Embedded ICC profile
10. iTXt, tEXt, and zTXt - Text chunks, which may include the following information:
- Title, Author, Description, Copyright, Creation Time, Software, Disclaimer, Warning, Source, Comment
11. bKGD - Background color.
12. pHYs - Physical pixel dimensions.
13. sBIT - Significant bits.
14. sPLT - Suggested palette.
15. hIST - Palette histogram.
16. tIME - Identifies the last time in which an image was modified.
The APNG (animated .png file) specification also uses three unique chunks:
17. acTL Animation control chunk - tells parser that file is an animated png, the number of frames in the file, and the number of times to play the animation.
18. fcTL Frame control chunk - includes the display time of the following frame.
19. fdAT Frame data chunk - same structure as the IDAT chunks, except preceded by a sequence number.
When most optimization tools are working on PNG imagery, what they are essentially doing is removing all but the IHDR, PLTE, IDAT and IEND chunks from a file. They also will combined IDAT chunks into one master IDAT chunk as well, thereby saving a bit more file size. Some optimization tools will also remove the PLTE chunk from an image as well without any impact on an image's appearance on-screen as well...though there are varying reports about whether or not the PLTE chunk is required in order to ensure a properly functioning and displaying graphic.
If you are ever wondering what any of your PNG images look like "under the hood," a great little tool called TweakPNG will allow you to view all of the individuals chunks of information that are included with your file. It will also allow you to remove unnecessary chunks of information or even ADD chunks if the need should arise. If, however, that is a case of "too much information" and you simply want to have your image file sizes shrink without any noticeable change to your image's appearance on-screen, visiting our 8-bit, 24-bit and 32-bit .png tutorials for Do It Yourselfers should be very useful.
Other: