PNG (Portable Network Graphics) was introduced in 1996 as a patent-free replacement for GIF. It compresses images losslessly, supports full alpha transparency, and handles up to 48 bits per pixel. For graphics, screenshots, line art and anything with sharp edges, PNG is consistently the best raster choice.
PNG's defining trade-off is file size on photographic content: because the format stores every pixel exactly, a typical phone photo can be 5–10× larger as PNG than as JPG. The right rule of thumb: PNG for graphics, JPG (or WebP) for photographs.
Modern alternatives close some of this gap. WebP supports both lossless mode and transparency, with roughly 25% smaller files than PNG for graphics. AVIF compresses graphics even harder but at the cost of slower decode. For pure graphics where you can control the delivery pipeline, lossless WebP is often a better choice than PNG today — for anywhere PNG support is non-negotiable, PNG remains the safe default.
History — introduced 1996
By: Thomas Boutell (lead) and the PNG Development Group
PNG was created in 1995–1996 as an unencumbered replacement for GIF, which carried patent restrictions on its LZW compression at the time. The format added 24-bit colour, full alpha transparency, and superior lossless compression. PNG 1.0 was published as an RFC in 1996 and as a W3C recommendation in 1997.
How it works
PNG stores image data in a series of typed chunks (IHDR for the header, IDAT for the image data, IEND to close the file). The image data is filtered (per scanline) and then compressed with DEFLATE — the same algorithm zip files use. The filter step transforms each row of pixels into a representation that compresses better, by predicting each pixel from its neighbours.
Because PNG is lossless, the decoded output is bit-identical to the input. The trade-off is file size: photographic content with lots of local variation doesn't compress as efficiently as the patterns of repeating colour found in graphics and screenshots.
Strengths and weaknesses
Strengths
- Truly lossless — every pixel is stored exactly. Re-saving never degrades quality.
- Full alpha transparency — the only universally-supported raster format with proper alpha (WebP and AVIF support it too but coverage isn't yet universal).
- Excellent for graphics with large areas of solid colour, sharp edges and limited palettes.
- Universal browser compatibility going back decades.
Weaknesses
- Very inefficient for photographic content — typically 5–10× larger than JPG for the same image.
- No animation support in standard PNG (APNG exists but isn't universally rendered).
- Lossless encoding produces large files even on simple-looking content.
- PNG's compression is roughly 25% behind lossless WebP for the same image quality.
When to use it
- Screenshots and screen recordings
- Logos, icons and brand assets requiring transparency
- Graphics, illustrations, line art and diagrams
- UI assets and design exports
- Source files for editing pipelines (no compounding quality loss)
When NOT to use it
- Photographs — use JPG or WebP. PNG files will be 5–10× larger with no visible quality benefit.
- Web pages where every byte matters — WebP losslessly compresses graphics ~25% smaller than PNG.
- Animation — use animated WebP or MP4. APNG support is inconsistent across platforms.
- Print at very large sizes — PNG's lossless storage produces enormous files. Vector formats (SVG) scale infinitely without size cost.
Browser support
Global coverage: 100%
| Browser | Support |
|---|---|
| Chrome | All versions |
| Firefox | All versions |
| Safari | All versions |
| Edge | All versions |
| Legacy / notes | Universal. Full alpha transparency rendered correctly since IE7. |
Performance considerations
- PNG decode is fast on every modern device — the algorithm is well-optimised.
- PNG files compress better when you optimise them with tools like oxipng or pngquant. Many CMSes leave default-quality PNG exports in place; running a one-time optimisation pass typically cuts 30–50% of file size with zero quality loss.
- Interlaced PNG (Adam7) renders progressively but is rarely worth the size penalty on web pages.
SEO considerations
- PNG is the safe default for content with transparency; search engines treat it well.
- If you're using PNG for photographs, switch to JPG or WebP — your pages are needlessly heavy and Core Web Vitals (LCP) will suffer.
Common mistakes
- Using PNG for photographic content — produces files 5–10× larger than necessary.
- Skipping PNG optimisation entirely — every PNG benefits from a pass through pngquant or oxipng.
- Choosing PNG-24 when PNG-8 (palette-based) would do — palette PNGs are 4–8× smaller for content with limited colours.
Frequently asked questions
- What's the difference between PNG-8 and PNG-24?
- PNG-8 stores up to 256 colours (palette-based, like GIF) and is dramatically smaller for graphics with limited colour. PNG-24 stores 24 bits per pixel and is what you get from a typical 'save as PNG' export. PNG-32 adds an 8-bit alpha channel on top.
- Should I use PNG or JPG?
- PNG for graphics, screenshots, logos, line art and anything with transparency. JPG for photographic content. For photographic PNGs that don't need transparency, convert to JPG to cut file size by 80%+.
- Does PNG support animation?
- Standard PNG doesn't. APNG (Animated PNG) extends the format with animation support but isn't universally rendered — use animated WebP or MP4 for cross-browser animation.
- Why are my PNG files so big?
- PNG is lossless — every pixel is stored exactly. For photographic content this means files 5–10× the size of an equivalent JPG. If you don't need transparency or lossless storage, convert to JPG or WebP.
- Should I use PNG or WebP for transparency?
- Lossless WebP compresses ~25% smaller than PNG for the same image, with identical transparency support. Use WebP where you control the delivery (your own website, modern app); stick with PNG where you need maximum compatibility (email, legacy systems).