image/png PNG Flagship
Identifies PNG images — a lossless format with transparency support, ideal for graphics and screenshots.
What it's for
image/png identifies PNG (Portable Network Graphics) images — a lossless compression format that preserves exact pixel data with no quality degradation, and supports full alpha-channel transparency. It's the standard choice for anything where JPEG's lossy compression would introduce visible artifacts: screenshots, UI graphics, logos, icons, diagrams, and any image with sharp edges, flat color regions, or text.
PNG was originally designed specifically as a patent-unencumbered, open replacement for GIF (which had licensing issues with its LZW compression at the time), and it inherited and improved on GIF's core strengths — lossless compression and transparency — while adding much better color depth support.
Format & syntax
Content-Type: image/png
No parameters. PNG supports multiple color modes (indexed palette, grayscale, RGB, RGBA with alpha transparency), and unlike JPEG, every re-save preserves exact pixel data with no cumulative generation loss, since compression is lossless.
How it's used in practice
- Screenshots and UI graphics — the default for capturing and sharing screenshots, since PNG's lossless compression preserves sharp text and UI edges perfectly, unlike JPEG which would introduce visible compression artifacts around them.
- Logos and icons with transparency — any image needing a transparent background (to sit cleanly over varying page backgrounds) relies on PNG's alpha channel support, a feature JPEG entirely lacks.
- Diagrams and illustrations with flat colors — images with large areas of solid color (charts, diagrams, simple illustrations) compress very efficiently as PNG, sometimes producing smaller files than an equivalent JPEG despite being lossless, precisely because PNG's compression algorithm handles flat color regions well.
- Favicons and app icons — small icon graphics needing crisp, exact pixel reproduction and often transparency, making PNG (or in some cases SVG) the standard choice over JPEG.
Common mistakes & gotchas
- Using PNG for photographs and getting unnecessarily large files — PNG's lossless compression means photographic content (with continuous gradients and complex detail) produces significantly larger files than an equivalent-quality JPEG, since PNG isn't designed to exploit the kind of perceptual redundancy JPEG's lossy compression targets.
- Not leveraging PNG's indexed color mode for simple graphics — for images with a limited color palette (logos, simple icons), using PNG's indexed/palette color mode instead of full RGB/RGBA can meaningfully reduce file size without any visual quality loss, though many image export tools default to a less space-efficient mode unless explicitly configured otherwise.
- Semi-transparent edges looking wrong against certain backgrounds — PNG's alpha transparency is genuine (a true alpha channel, not a binary "transparent or not"), but improperly generated or exported images (with unclean anti-aliased edges, or mismatched color profiles) can show visible fringing or halos against certain background colors.
- Assuming PNG is always the "safe, best-quality" default without considering file size — for large images or high-traffic sites, defaulting to PNG for everything (including photographic content that would compress far better as JPEG or WebP) is a common performance mistake — choose the format based on actual content type, not just "lossless is always better."
Comparison & FAQ
| Type | Purpose | Key difference from image/png |
|---|---|---|
| image/jpeg | Lossy photo compression | Much smaller files for photographs, but no transparency support and lossy quality degradation |
| image/webp | Modern format, both lossy and lossless modes | Often smaller than PNG at equivalent lossless quality, with broad modern browser support |
| image/svg+xml | Vector graphics | Infinitely scalable without pixelation, ideal for simple logos/icons versus PNG's fixed raster resolution |
When should I use PNG instead of JPEG?
For images needing transparency, sharp edges/text (screenshots, UI graphics, logos), or when any quality loss is unacceptable. For photographs where some compression artifacts are acceptable in exchange for smaller files, JPEG is usually the better choice.
Why is my PNG file so much larger than an equivalent JPEG?
PNG's lossless compression doesn't exploit the same kind of perceptual redundancy JPEG's lossy algorithm does, so for photographic or complex gradient content, PNG files are typically significantly larger — this is expected behavior, not a bug, and is exactly why format choice should match content type.
Can PNG handle transparency the same way GIF does?
PNG's transparency is more capable — GIF only supports binary (fully transparent or fully opaque) transparency, while PNG supports a full alpha channel with genuine partial transparency and smooth semi-transparent edges.
Should I convert all my images to PNG for maximum quality?
No — match the format to the content. Photographs generally compress much better as JPEG or WebP; PNG is the better choice specifically for graphics, screenshots, and anything requiring transparency or perfectly sharp edges.