Format
What Is PNG? The Complete Guide to PNG Images
PNG is the lossless image format for the web — pixel-perfect compression with full alpha transparency, ideal for logos, UI graphics, and screenshots.
What is PNG?
PNG (Portable Network Graphics) is an open image format published in 1996, created as a free replacement for the patent-encumbered GIF format. Where GIF limited images to 256 colors, PNG supports full 24-bit color with 8-bit alpha transparency — a significant leap that made it the standard format for web graphics requiring transparency.
Unlike JPEG, PNG uses lossless compression: every pixel is preserved exactly. This means PNG files are larger than JPEG for photographs, but the quality is perfect regardless of how many times you save the file. PNG is the right master format for images you'll edit repeatedly.
How PNG compression works
PNG compression is lossless — no image data is ever discarded. The compression algorithm has two stages:
- Pre-compression filtering: PNG applies a prediction filter to each row of pixels, transforming the data to increase redundancy. Different filter modes (None, Sub, Up, Average, Paeth) are available, and encoders can select the best mode per row.
- DEFLATE compression: The filtered data is compressed using the DEFLATE algorithm (the same underlying algorithm as ZIP and gzip). DEFLATE uses a combination of LZ77 sliding window compression and Huffman coding.
Because PNG is lossless, the compression ratio depends entirely on image content. Flat colors, gradients, and repeating patterns compress very well. Photographic noise and detail-heavy textures compress poorly — you get a huge file that's still perfectly identical to the original.
Color depth and alpha channel
- PNG-24 (truecolor): 24-bit RGB + optional 8-bit alpha = 32-bit RGBA. 16.7 million colors. Each pixel can have any transparency value from 0 (fully transparent) to 255 (fully opaque).
- PNG-8 (indexed): 8-bit indexed palette, up to 256 colors. Supports 1-bit transparency (on/off). Smaller than PNG-24 for simple flat-color graphics.
- Grayscale PNG: 8-bit (256 shades) or 16-bit (65,536 shades) gray levels, with optional alpha.
- 16-bit per channel: PNG supports 48-bit RGB or 64-bit RGBA for professional workflows that need high bit depth (HDR editing, scientific imaging).
When to use PNG
- Logos and brand graphics: Flat colors, clean edges, and transparency are preserved perfectly.
- Screenshots and screen recordings: Text and UI elements stay sharp with no JPEG-style ringing artifacts.
- Icons and app graphics: Sharp pixel-level detail is maintained at any size.
- Images requiring semi-transparent edges: Drop shadows, glows, and feathered cutouts look correct only with 8-bit alpha.
- Master/archive files: Use PNG for source files you'll repeatedly edit and re-export.
Do not use PNG for:
- Photographs — file sizes will be enormous; use WebP or JPEG instead
- Video or animation — use MP4 or WebP animation
- Print delivery in CMYK — PNG is RGB-only; use TIFF for professional print
PNG vs other formats
| Format | Compression | Alpha | Best use | Photo size vs PNG |
|---|---|---|---|---|
| PNG | Lossless | 8-bit | Logos, UI, screenshots | 100% (baseline) |
| JPEG | Lossy | None | Photos without transparency | 20–30% |
| WebP lossless | Lossless | 8-bit | Web delivery of PNG content | 65–75% |
| AVIF lossless | Lossless | Yes | Best size, slower encode | 60–70% |
| SVG | Vector | Native | Logos/icons (vector art) | N/A (vector) |
Frequently asked questions
Does PNG support animation?
Standard PNG does not support animation. APNG (Animated PNG) is an extension that adds animation support while maintaining backward compatibility — non-APNG viewers show only the first frame. APNG has full browser support but is rarely used in practice; WebP animation or MP4 are better choices for animated content.
Why is my PNG bigger than JPEG?
Because PNG uses lossless compression while JPEG uses lossy compression. PNG must preserve every pixel exactly, so photographs — which have complex detail in every region — compress poorly. A photograph saved as PNG is typically 3–10× larger than the same image as JPEG or WebP. PNG's compression advantage only appears for images with large areas of flat color, such as logos and UI graphics.
What is PNG-8 vs PNG-24?
PNG-8 stores up to 256 colors using an indexed palette, similar to GIF. It is much smaller than PNG-24 for simple graphics and supports 1-bit transparency (on/off). PNG-24 stores full 24-bit RGB color plus optional 8-bit alpha, supporting 16.7 million colors with smooth semi-transparency. For most modern use cases, PNG-24 (with alpha) is the correct choice.
Can PNG have a transparent background?
Yes — this is one of PNG's most important features. PNG supports full 8-bit alpha transparency, meaning each pixel can be anywhere from completely opaque to completely invisible, with all gradations in between. This allows smooth edges, drop shadows, and anti-aliased cutouts.
Should I use PNG or WebP for logos?
WebP lossless for web delivery. Lossless WebP matches PNG quality exactly (same pixels) while typically being 25–35% smaller. Use PNG as your master archive format and export to WebP for production. If the target system requires PNG (older CMS, email, print), keep PNG as the delivery format for those cases.