Choosing between PNG, JPEG and WebP

The question behind the question

People usually ask which image format is best. That question has no answer, because the three common formats were designed for different content. A better question is what kind of image you have: one built from flat regions and sharp edges, or one built from continuous gradients and noise. Almost every practical decision follows from that.

PNG stores exact pixels

PNG is lossless. It applies a per-row prediction filter and then DEFLATE compression, so decoding returns precisely the pixel values that were encoded. Nothing is approximated, and re-saving a PNG repeatedly never degrades it.

That guarantee is cheap when neighbouring pixels are identical or follow a simple pattern, which is why PNG is excellent for screenshots, user-interface exports, logos, line art, charts and anything containing text. It is expensive when every pixel differs slightly from its neighbour, which is exactly what a photograph looks like. A photograph saved as PNG is typically several times larger than the same photograph saved as JPEG at a quality most people cannot distinguish from the original.

PNG also carries a full alpha channel, so transparency is smooth rather than a single knocked-out colour.

JPEG throws away what you are unlikely to see

JPEG is lossy by design. It converts the image to a luminance and two chrominance channels, optionally subsamples the chrominance channels because human vision resolves colour detail less finely than brightness, splits each channel into eight-by-eight blocks, applies a discrete cosine transform, and then divides the resulting coefficients by a quantisation table. Quantisation is where information is discarded, and the quality slider is essentially a scale factor on that table.

The result is very effective on photographs, where the discarded high-frequency detail is mostly noise. It is poor on sharp edges. Black text on white becomes a strong high-frequency signal, quantisation rounds it away, and you get the familiar grey haze around letters. Chroma subsampling adds smearing on saturated edges.

Two further properties matter in practice. JPEG has no transparency, so an alpha channel is flattened onto a background colour. And every save is a fresh quantisation, so repeatedly opening and re-saving a JPEG compounds the damage — generation loss. Keep an original, and re-export from it rather than from the last export.

What WebP adds

WebP is two codecs under one file extension. Lossy WebP uses the intra-frame coding techniques from the VP8 video codec: block prediction from already-decoded neighbours, a transform, and quantisation. Lossless WebP uses a different scheme built around colour transforms, palette handling and entropy coding.

Practically, lossy WebP usually produces a smaller file than JPEG at visually comparable quality, and lossless WebP usually produces a smaller file than PNG for the same pixels. Unlike JPEG, both WebP modes support an alpha channel, which removes the old awkward choice between transparency and small photographic files.

WebP is supported by every current major browser, so for images displayed on the web it is a reasonable default. The caveat is everything that is not a browser: some desktop applications, older operating system previewers, print workflows and third-party upload forms still expect PNG or JPEG. If the file is going to someone else rather than onto a web page, the older format is the safer choice.

A decision order that works

Start with the destination. If the image is for a web page you control, prefer WebP, and choose lossy or lossless by content. If the image is going into a document, an email attachment, a printer or another person’s system, use PNG for flat graphics and JPEG for photographs.

Then look at the content. Flat colour, sharp edges or text means a lossless format. Continuous tone means a lossy one. If you need transparency and cannot use WebP, PNG is the only remaining option.

Finally, check the quality setting rather than accepting a default. For photographic JPEG or lossy WebP, quality in the region of 75 to 85 is where most of the file size disappears and most of the visible fidelity remains. Below that, artefacts become obvious; above it, the file grows quickly for very little gain. The right number is content-dependent, so compare the exported file against the original at full size before committing.

A note on converting between them

Converting a lossy file to a lossless one does not restore anything. A JPEG saved as PNG keeps every compression artefact and simply stores them exactly, usually producing a much larger file than the JPEG it came from. Conversion is only genuinely useful in the direction of the destination’s requirements, or when the source is an unmodified original.

The same reasoning applies to resizing. Enlarging an image invents pixels by interpolation; it cannot recover detail that was never captured. Reducing is safe, and it is almost always the single most effective way to make an image file smaller — a photograph displayed at 800 pixels wide has no need to be stored at 4,000.