JPEG vs PNG vs WebP: Choosing an Image Format

JPEG, PNG and WebP are not three flavours of the same thing — they use genuinely different compression strategies, and the strategy determines what each format is actually good for. Picking the wrong one produces either a needlessly large file or a needlessly degraded one, and the fix is usually just knowing what the image is for before choosing.

How each format actually compresses

JPEG (standardised as ITU-T T.81) works by transforming the image into frequency information and discarding the high-frequency detail the eye is least likely to notice — the more aggressively it discards, the smaller the file and the more visible the artifacts. PNG is lossless: it re-encodes the exact pixel data more compactly using general-purpose compression, so there is no quality loss but also a hard floor on how small a photographic image can get. WebP supports both modes in one format, generally reaching a given visual quality at a smaller file size than either — Google's own published figures put lossy WebP at roughly 25–34% smaller than a comparable JPEG, and lossless WebP at roughly 26% smaller than the equivalent PNG.

Choosing by what the image actually is

• Photographs for the web: WebP first choice where the platform supports it; JPEG as the universally compatible fallback. Both are lossy formats built for exactly this kind of continuous-tone image.
• Screenshots, logos, icons and flat-colour graphics: PNG (or lossless WebP). These have large areas of identical colour, which lossless compression handles efficiently — running them through a lossy JPEG encoder instead typically produces a larger file with visible artifacts around sharp edges and text.
• Anything needing transparency: PNG or WebP. JPEG has no alpha channel at all, so transparent areas get filled with a solid colour, which is a common and avoidable mistake.
• Anything that will be edited again later: keep a lossless master (PNG, or the original source file) and export lossy copies for delivery. Re-compressing an already-lossy JPEG loses more detail each time, because the artifacts of the first pass get encoded into the second.

Choosing a JPEG/WebP quality setting

For photographs, quality 75–85 is the practical range for web use: below roughly 70, compression artifacts — blocky edges, banding in gradients like skies — start becoming visible at normal viewing size; above roughly 90, file size grows quickly for detail that is very difficult to perceive. A camera or phone typically saves originals at near-maximum quality, which is why re-encoding at 80 often produces a large size reduction that is visually almost indistinguishable from the source.

A concrete comparison

The PNG row is the point worth remembering: PNG's lossless compression is excellent for flat-colour graphics and actively bad for photographs, because there is very little repeated pixel data for it to compress. Using PNG for a photograph because "lossless sounds better" usually produces a file several times larger than a visually equivalent JPEG or WebP, for no visible quality benefit.

Common mistakes

• Using PNG for photographs — large files for no visible gain, as above.
• Using JPEG for anything needing transparency — the alpha channel is simply not supported, and the result silently fills transparent areas with a solid colour.
• Re-compressing an already-compressed JPEG repeatedly — always work from the original, not a previously compressed copy, since each lossy pass compounds the last.
• Assuming a smaller percentage reduction means the compression "didn't work" — an image that barely shrinks was probably already well compressed, and pushing the quality down further only degrades it.

Limitations

• WebP support is now broad across modern browsers, but any workflow that must guarantee compatibility with very old software or hardware should keep a JPEG fallback.
• Compression settings interact with image content — the same quality setting produces different results on a detailed photo versus a smooth gradient, so treat the percentages above as a starting point, not a guarantee.
• Metadata (EXIF, colour profiles) is often stripped during re-encoding, which is good for privacy and file size but can remove information — copyright, GPS, colour space — that a workflow may still need.