Understanding PNG: The Lossless Image Format
PNG is the backbone of lossless imaging on the web. Every time you save a screenshot, export a logo with a transparent background, or share a graphic that needs pixel-perfect accuracy, you are almost certainly reaching for PNG. It has been around since 1996, and nearly three decades later it remains the default choice when quality cannot be compromised.
PNG stands for Portable Network Graphics. It was created as a patent-free replacement for GIF after Unisys began enforcing its LZW compression patent. What started as a legal workaround became the most trusted lossless image format on the internet, and it earned that position by doing one thing exceptionally well: preserving every single pixel exactly as it was saved.
How PNG Compression Works
PNG uses a two-stage compression pipeline. First, a prediction filter is applied to each row of pixels. The filter predicts each pixel's value based on neighboring pixels, then stores only the difference. When large areas of an image share similar colors, these differences are small numbers that compress efficiently.
The filtered data is then compressed using the DEFLATE algorithm, the same compression method behind ZIP files and gzip. DEFLATE combines LZ77 (finding repeated sequences) with Huffman coding (assigning shorter codes to common patterns). The result is significant file size reduction without any data loss.
- Filter stage: Predicts pixel values row by row using five filter types (None, Sub, Up, Average, Paeth). The encoder picks the best filter per row to maximize compressibility.
- DEFLATE stage: Compresses the filtered data using LZ77 sliding window and Huffman coding. Compression level (1-9) controls the tradeoff between encoding speed and file size.
Color Depth and Bit Depth Options
PNG supports a range of color depths that make it flexible for different types of images. The format stores pixel data in chunks, and the bit depth determines how many colors each pixel can represent.
For photographs and rich graphics, 24-bit truecolor (8 bits per channel, roughly 16.7 million colors) is standard. Add an 8-bit alpha channel and you get 32-bit RGBA, which is what most web graphics with transparency use. PNG also supports 48-bit color (16 bits per channel) for high-precision scientific and medical imaging, though this is rarely needed for web use.
For simpler graphics, PNG offers indexed color mode with a palette of up to 256 colors. Indexed PNGs are dramatically smaller than truecolor and are ideal for icons, simple illustrations, and any image with a limited color palette.
Alpha Transparency: PNG's Killer Feature
Full alpha channel transparency is the single feature that keeps PNG indispensable. Unlike GIF, which supports only binary transparency (a pixel is either fully opaque or fully transparent), PNG allows 256 levels of transparency per pixel. This enables smooth anti-aliased edges, drop shadows, glass effects, and gradual fade-outs.
This matters enormously in practice. A logo placed over a colored background needs smooth edges. A UI overlay needs partial transparency. A product photo with a removed background needs clean anti-aliased cutouts. PNG handles all of these with pixel-perfect results.
WebP also supports alpha transparency, but PNG's universal compatibility means it remains the safer choice when you need transparency and cannot guarantee what software or platform will open the file.
Interlacing with Adam7
PNG supports an optional interlacing scheme called Adam7. Instead of storing pixels top-to-bottom, Adam7 encodes the image in seven passes at progressively higher resolutions. The first pass provides a very coarse preview (every 8th pixel), and each subsequent pass fills in more detail.
The practical effect is that interlaced PNGs display a blurry preview almost immediately during download, then sharpen as more data arrives. For slow connections, this gives users a meaningful preview before the full image loads. The tradeoff is that interlaced PNGs are typically 5-10% larger due to reduced compression efficiency across the passes.
PNG File Structure: Chunks and Metadata
Every PNG file begins with an 8-byte signature that identifies it as PNG, followed by a series of chunks. Each chunk has a 4-character type code, a length, data, and a CRC checksum. The critical chunks are IHDR (image header with dimensions, bit depth, color type), IDAT (the compressed image data), and IEND (end of file marker).
Ancillary chunks store optional metadata: tEXt holds text key-value pairs, pHYs specifies physical pixel dimensions (DPI), gAMA stores gamma correction, and iCCP embeds ICC color profiles. These chunks are ignored by software that does not understand them, which is why PNG files are remarkably robust across different tools.
When PNG Is Overkill
PNG's lossless compression comes at a file size cost. Photographs saved as PNG are typically 3-5x larger than the same image as JPG and 2-3x larger than WebP lossy. For a hero image on a website, that could mean 2MB as PNG versus 400KB as JPG with no visible difference to the human eye.
If your image is a photograph destined for web display, PNG is almost certainly the wrong format. JPG or WebP will produce a visually identical result at a fraction of the file size. PNG is the right choice when you need lossless quality, transparency, or guaranteed pixel accuracy.
PNG vs APNG: The Animation Question
PNG itself does not support animation, but an extension called APNG (Animated PNG) does. APNG was proposed by Mozilla and adds multiple frames to the standard PNG format. It is supported in all modern browsers as of 2026, though it never received official adoption into the PNG specification.
APNG offers significant advantages over GIF for animation: full 24-bit color with alpha transparency, much better compression, and smooth gradients without banding. If you need animated images with transparency, APNG is technically superior. However, WebP animation and even CSS/JS-based animations have largely displaced it in practice.
Practical Tips for Working with PNG
Getting the most out of PNG requires understanding a few practical details.
- Use indexed color mode for simple graphics. A 256-color PNG icon can be 5-10x smaller than its 24-bit truecolor equivalent.
- Run PNG files through an optimizer like OptiPNG, PNGCrush, or Zopfli. These tools try all filter and compression combinations to find the smallest possible file without any quality loss.
- Avoid using PNG for photographs on the web. Convert to WebP or JPG for web delivery and keep PNG as your archival source.
- Strip unnecessary metadata chunks (tEXt, comments, profiles) if file size matters. Many PNG files carry kilobytes of metadata that is never displayed.
- When transparency is not needed, consider whether JPG or WebP would serve better. PNG's advantage disappears when you do not need its unique features.
Frequently Asked Questions
What is the difference between lossless and lossy compression?
Lossless compression (used by PNG) preserves every pixel exactly. You can save and re-save a PNG file a thousand times with zero quality degradation. Lossy compression (used by JPG and WebP lossy) discards some visual information to achieve smaller files. The discarded data is chosen to be minimally perceptible, but repeated re-saving of lossy files compounds the quality loss.
Does PNG support animation?
Standard PNG does not support animation. APNG (Animated PNG) is an extension that adds multi-frame support. APNG is supported in all modern browsers in 2026, but it was never formally adopted into the PNG specification. For web animations, consider WebP or CSS/JS-based approaches.
Is PNG suitable for print?
PNG can be used for print, but it has limitations. PNG does not natively support CMYK color space, which is required for professional printing. For print workflows, TIFF or PDF are preferred because they support CMYK, embedded ICC profiles, and higher bit depths. PNG works fine for casual home printing from an inkjet.
How does PNG transparency work on dark backgrounds?
PNG alpha transparency is independent of the background color. Each pixel stores its own opacity value from 0 (fully transparent) to 255 (fully opaque). The displaying software composites the PNG over whatever background is behind it. If anti-aliased edges look wrong on a dark background, it usually means the image was originally created against a white background with pre-multiplied alpha or without proper transparency handling.