JPEG vs PNG vs WebP — which to use and when

The short version

• Photographs — JPEG, or WebP if the destination accepts it.
• Logos, diagrams, screenshots of text, anything with transparency — PNG, or WebP if the destination accepts it.
• Anything going on a web page you control — WebP, with a JPEG or PNG fallback if you need to support very old software.
• Anything going into an upload form — whatever the form says, even if it is not the best choice. Forms are literal.

JPEG

JPEG is from 1992 and is still the most widely supported image format in existence. It is lossy: it throws information away permanently in exchange for much smaller files. Its compression is designed around how human vision works — we are sensitive to brightness detail and much less sensitive to colour detail, so JPEG keeps the former and discards a lot of the latter.

Good at: photographs, and anything with smooth gradients and natural texture. Universally accepted.

Bad at: hard edges and flat colour. Text in a JPEG develops visible halos. It also has no transparency at all — no alpha channel exists in the format — so anything transparent becomes a solid colour.

Watch out for: repeated saving. Every save re-encodes and loses a little more, and the losses accumulate. Keep an original.

PNG

PNG is lossless. What goes in comes out exactly, pixel for pixel. It also has a full alpha channel, so it can store genuine transparency including partial transparency at the edges of shapes.

Good at: screenshots of interfaces, logos, icons, diagrams, charts, line art — anything with large areas of flat colour and sharp boundaries. It is excellent at exactly the content JPEG is worst at, and for that content it is often smaller than JPEG as well as better looking.

Bad at: photographs. Because it stores everything faithfully, it stores all the sensor noise too, and a photograph saved as PNG is routinely five to ten times the size of the same photograph as JPEG with no visible improvement.

Watch out for: there is no quality setting. If a PNG is too large, your only options are fewer pixels or a different format. This surprises people who expect a slider.

WebP

WebP is Google’s format from 2010, and it is the only one of the three that does both jobs. It has a lossy mode that competes with JPEG, a lossless mode that competes with PNG, and an alpha channel available in either — something neither of the others manages.

Good at: most things. Against JPEG it typically produces files 25 to 35 per cent smaller at the same perceived quality, and the advantage grows as the budget tightens. Against PNG, its lossless mode usually wins by 20 to 30 per cent, and for transparent images its lossy mode can be dramatically smaller.

Bad at: being accepted. Every current browser supports it, but plenty of upload forms, print services and older desktop applications do not. This is its only real weakness, and it is entirely about the destination rather than the format.

What about AVIF?

AVIF is newer again and compresses better than all three, particularly at very small file sizes. Browser support is now good. It is not offered by FileBelow because browsers cannot reliably encode it — decoding and encoding are separate capabilities, and the encoder is the one that is missing. Producing AVIF in a browser means shipping a large WebAssembly encoder, and the destinations that accept AVIF are still a small subset of those that accept WebP.

How to choose in practice

Start with the destination. If it names a format, use that one; the question is settled and being right about compression will not help you if the upload is refused.

If the choice is yours, ask whether the image is a photograph. If it is, JPEG or WebP. If it is a graphic with flat colour, sharp edges or transparency, PNG or WebP. Then, if file size is tight, prefer WebP within whichever pair you landed in.

FileBelow follows the same reasoning automatically when the format is set to Automatic: it keeps PNG or WebP where transparency exists and would otherwise be lost, and uses JPEG for photographs. After a JPEG result at a tight limit it also measures whether WebP would be materially better for your specific image, and offers the switch only when it actually would be.