Everything you need to know about PNG
PNG (Portable Network Graphics, .png) is the lossless raster format created in 1996 specifically to replace GIF after Unisys started enforcing GIF's LZW patent. It's the format you reach for when you need transparency, sharp text, or pixel-perfect graphics - logos, screenshots, icons, UI mockups.
How it works under the hood
- Lossless DEFLATE compression. PNG uses the same compression as ZIP (DEFLATE = LZ77 + Huffman). Result: bit-perfect pixels with no quality loss across saves.
- Alpha channel. PNG natively supports 8-bit alpha (256 transparency levels), which JPG cannot. This is why every transparent logo on the web is a PNG.
- Color modes. Greyscale, palette (8-bit indexed), truecolor (24-bit RGB), or truecolor-alpha (32-bit RGBA). Indexed PNGs can rival GIF for simple graphics.
- Chunk structure. Each PNG is a sequence of named chunks (IHDR, IDAT, IEND, plus optional metadata). The format is extensible without breaking compatibility.
Where you'll actually use it
- Logos, icons, and UI graphics (transparency required)
- Screenshots (preserves pixel-perfect text)
- Diagrams, charts, and infographics
- Print-ready graphics that need to remain crisp
How it compares to alternatives
PNG vs JPG: PNG for graphics (lossless), JPG for photos (smaller). PNG vs SVG: SVG for anything that's actually vector (logos, icons); PNG for raster. PNG vs WebP: WebP can be 25% smaller with similar lossless quality - use both if you can.
Things that will trip you up
- PNG photos are 5-10x larger than equivalent JPGs - never use PNG for photographs
- PNG doesn't support animation (use APNG, GIF, or WebP for animated images)
- Default Photoshop PNG export is bloated - run files through `pngquant`, `oxipng`, or `tinypng` for 30-70% smaller output
Test it yourself: `pngcheck` for integrity, ImageMagick `identify`, `oxipng` and `pngquant` for optimization. Photoshop and GIMP for editing.