Introduction to PNG
PNG (Portable Network Graphics) is a lossless bitmap image format developed as an improved alternative to GIF, which only supports 256 colors. PNG supports multiple image types, including grayscale, true color, true color with alpha transparency, and indexed color images. Today, it is one of the most widely used image formats on the internet.
Key Features
| Feature | Description |
|---|---|
| Compression | Low compression ratio, as PNG retains all pixel information and only applies entropy encoding for lossless compression. |
| Image Quality | High-quality images with support for 8-bit grayscale, grayscale with transparency, 24-bit true color, and 32-bit true color with an alpha channel. |
| Animation Support | The native PNG format does not support animation; however, the APNG (Animated PNG) extension enables animation support. |
| Compatibility | Highly compatible with most web browsers and image editing software. |
PNG Encoding Process
Unlike formats that use lossy compression, PNG preserves pixel integrity by optimizing lossless compression efficiency. The encoding process consists of several key steps:
Pass Extraction
Extracts RGB data from the image using methods such as progressive row extraction or the Adam7 algorithm for interlaced display.
Scanline Serialization
Converts the 2D pixel matrix into a byte stream, where pixels are arranged row by row from left to right, and rows are ordered from top to bottom. For Adam7 interlaced images, pixel data is rearranged accordingly.
Filtering
Applies filter algorithms such as None, Sub, Up, Average, and Paeth to optimize redundancy and improve compression. The filtering process analyzes pixel differences to reduce redundancy before applying Huffman Coding.
Compression
Uses the Deflate algorithm, which combines LZ77 and Huffman Coding, to compress filtered image data efficiently. The goal is to assign shorter codes to frequently occurring values, improving overall compression efficiency.
The decoding process is the reverse: decompressing data, reversing filtering, and reconstructing the RGB values to generate the final image.
How to Reduce PNG File Size?
Using Indexed Color Mode (Palette-Based PNG)
PNG supports indexed color images (palette mode), where instead of storing individual pixel values, the image stores color indices referring to a predefined palette.
Indexed color mode is most effective for images with limited color variations, significantly reducing file size while maintaining visual quality.
Using indexed color mode can reduce PNG file size by over 50%, making it ideal for app icons, emojis, and simple graphics.
Lossy PNG Compression
Although PNG is natively lossless, lossy compression techniques can be applied before encoding. This includes color quantization, which reduces the number of unique colors, and converting 24-bit images to 8-bit indexed color mode.
Lossy compression can reduce PNG file size by more than 70%, making it useful for web optimization while maintaining reasonable image quality.
How Does PNG Support Animation?
APNG (Animated PNG)
APNG (Animated Portable Network Graphics) was introduced by Mozilla in 2008 to provide a superior alternative to GIF animations. Unlike GIF, which supports only 8-bit color depth (256 colors), APNG supports 24-bit true color and 8-bit transparency.
APNG provides higher-quality animations with smaller file sizes, making it a preferred choice for applications like animated movie posters and high-resolution emoticons.
