PNG File
Definition
PNG stands for Portable Network Graphics, published in 1996 and later standardised as ISO/IEC 15948. It uses lossless compression, so the pixels that come out of the decoder are bit-for-bit the pixels that went in. Colour can be an 8-bit palette of up to 256 entries, 24-bit truecolour, or 32-bit truecolour with an 8-bit alpha channel giving 256 levels of transparency per pixel — the reason a PNG logo can sit over any background without a white box around it. Every file begins with the same eight-byte signature, 89 50 4E 47 0D 0A 1A 0A, and is served as image/png. There is no animation worth relying on, and no quality slider: the only way to make a PNG smaller is to reduce colours or dimensions.
Why It Matters
The format choice shows up directly in bytes. A 2000 by 1500 photograph saved as PNG lands around 4.5 MB; the same photograph as JPEG at quality 80 is roughly 400 KB, and almost nobody can tell them apart on a screen. That is a ten-to-one penalty paid on every visit, for nothing. Turn the case around, though, and PNG wins clearly: a screenshot of an interface is flat colour and sharp text, exactly the kind of redundancy lossless compression eats, while a lossy encoder smears fringing around every letter. The rule of thumb is simple — photographs and anything with soft gradients go lossy, anything with hard edges, flat fills or transparency goes PNG.
How It Works
Encoding happens in two passes. First each scanline is filtered with one of five predictors — None, Sub, Up, Average or Paeth — which turns a row of similar pixels into a row of near-zeros. Then the whole filtered stream is compressed with DEFLATE and stored in IDAT chunks, bracketed by an IHDR header chunk and an IEND terminator, with optional chunks for text, gamma and colour profiles. Good image optimisation of a PNG means choosing better filters and a stronger DEFLATE pass with a tool like oxipng, or accepting a quantisation step: pngquant reduces truecolour to a tuned 256-entry palette and routinely cuts 60 to 70 percent, at the cost of being no longer strictly lossless. The file is then served with Content-Type image/png and a long cache lifetime, since the bytes never change once published.
Real-World Example
A team publishes a product tour on 99helpers at docs-tour.99helpers.site, with dashboard.png as the lead image. Straight from the screenshot tool at 3x density it was 1.4 MB. Scaled to 1600 pixels wide and run through pngquant it is 210 KB, with the text still crisp, and the page drops from 2.1 MB to under 900 KB. Nothing was converted on the way in — 99helpers stores and serves exactly the bytes uploaded, so the optimiser has to run before the upload.
Common Mistakes
- ✕Saving photographs as PNG — lossless compression finds nothing to exploit in photographic noise, so the file ends up several times larger than a lossy version nobody could distinguish
- ✕Flattening a transparent image against white before export — the edge pixels keep a white fringe that shows as a halo on any darker background
- ✕Uploading a 3x screenshot and displaying it at 400 pixels wide — three quarters of the downloaded data is thrown away by the browser on resize
- ✕Assuming PNG is always smaller because it is lossless — lossless means faithful, not compact
Related Terms
Lossless Compression
Lossless compression makes a file smaller without losing anything: decompress it and you get the original bytes back exactly. PNG, ZIP, FLAC, gzip and brotli all work this way.
JPEG File
A JPEG file is a raster image compressed by discarding detail the eye is least likely to miss. It was designed for photographs, and every time you re-save one it loses a little more.
WebP File
WebP is an image format from Google that handles lossy and lossless compression, transparency and animation in one file. At comparable visual quality it is typically 25 to 35 percent smaller than JPEG.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
Image Hosting
Storing image files somewhere on the web and serving them at addresses that can be dropped straight into an img tag, an email or a marketplace listing. The useful output is the address, not the upload.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →