Glossary Term

PNG

PNG (Portable Network Graphics) is a lossless image format that preserves exact pixel data — making it the default choice for screenshots where text clarity and color accuracy matter.

How PNG compression works

PNG compression happens in two stages. First, the image data passes through a filtering step that transforms each row of pixels to make patterns more compressible. The filter predicts each pixel's value based on its neighbors and stores the difference, which for areas of uniform color results in long runs of zeros.

Second, the filtered data is compressed using the DEFLATE algorithm — the same algorithm used in ZIP files. DEFLATE identifies repeating byte sequences and replaces them with shorter references. Areas with large blocks of identical color — solid backgrounds, flat UI surfaces, uniform borders — compress extremely well. Complex textures and photographic noise compress poorly.

This two-stage approach is why PNG excels at screenshots. Most screenshots contain large flat-color regions, sharp text edges, and precise geometric shapes — all of which produce highly compressible filter output. A typical UI screenshot at 1920 x 1080 might compress to 200-500 KB as a PNG, while the same image as an uncompressed bitmap would be over 6 MB.

PNG also supports an alpha channel for transparency, 24-bit color (16.7 million colors), and optional metadata chunks for gamma correction and color profile information.

PNG vs JPG vs WebP

Each format serves a different purpose:

  • PNG — lossless, exact pixel reproduction, supports transparency. Best for screenshots, UI elements, diagrams, and any image where text must remain sharp. Files are larger than lossy alternatives.
  • JPG — lossy, discards visual detail to reduce file size. Best for photographs and images with smooth gradients where pixel-level accuracy is not required. Does not support transparency. Compression artifacts are visible around sharp edges and text.
  • WebP — supports both lossy and lossless modes. Typically produces smaller files than PNG (lossless) or JPG (lossy) at comparable quality. Supports transparency. Widely supported in modern browsers but not universally supported in all image editors and document formats.

For screenshots with text, PNG is the safest default. JPG compression will blur text edges, producing artifacts that make small text harder to read. WebP lossless is a viable alternative when file size matters and the output will be consumed in a context that supports WebP.

When to use PNG

  • Screenshots with text — any capture that includes UI labels, code, terminal output, or readable content. PNG preserves every character edge without introducing blur.
  • Images with transparency — logos, icons, overlays, and any graphic that needs to composite over other content.
  • Pixel-accurate documentation — technical diagrams, wireframes, and annotated captures where every pixel must match the original.
  • Source assets and archives — when the image may be edited, cropped, or re-exported later. Starting from a lossless source avoids compounding quality loss across edits.
  • Batch capture output — automated screenshot workflows that produce hundreds of captures benefit from PNG's lossless guarantee. No manual quality check is needed after capture because the format does not alter the image.

Common mistakes

  • Using PNG for large photographs. A full-resolution photo saved as PNG can easily exceed 10 MB. JPG or WebP will produce a visually identical result at a fraction of the file size. Reserve PNG for content where lossless quality matters.
  • Not optimizing PNG files. Default PNG output from most capture tools is not optimally compressed. Running images through an optimizer can reduce file size by 20-50% without any quality loss — the image remains pixel-identical.
  • Converting JPG to PNG expecting quality improvement. Converting a lossy JPG to PNG does not restore lost quality. The compression artifacts baked into the JPG are preserved in the PNG at a larger file size. Always start from the original source when switching formats.
  • Ignoring file size in web contexts. PNG screenshots embedded in web pages can slow load times if they are not optimized or appropriately sized. Resize to the display dimensions and optimize before embedding, or consider WebP lossless as a smaller alternative.

Common Questions

Is PNG lossless?

Yes. PNG uses lossless compression, which means the decompressed image is identical to the original — no pixel data is discarded during compression.

Why are PNG files larger than JPG?

PNG preserves every pixel exactly, while JPG discards visual information the human eye is less likely to notice. This quality trade-off is what makes JPG files smaller.

Does PNG support transparency?

Yes. PNG supports an alpha channel that allows pixels to be fully transparent, fully opaque, or anywhere in between. This makes it the standard format for images with transparent backgrounds.

Should I use PNG for photographs?

Generally no. Photographs contain complex color gradients and noise that PNG compresses poorly, resulting in very large files. JPG or WebP produce much smaller files with minimal visible quality loss for photographic content.

Can I reduce PNG file size without losing quality?

Yes. Tools like OptiPNG and pngquant can reduce file size by optimizing the compression parameters without altering any visible pixel data. Palette reduction (quantization) can achieve further savings with minimal visual impact.

Sources

Related Resources