JPEG, PNG, WebP or AVIF: choosing by content

Format comparisons usually rank formats. That is the wrong shape for the question, because no format is better than the others in general — each one is built around an assumption about what the image contains. Match the assumption to your image and the choice makes itself.

The two families

Lossy formats — JPEG, WebP in its lossy mode, AVIF — discard information the human eye is bad at noticing, particularly fine variation in colour and texture. They assume the image is a photograph: a scene of gradual tonal change where no single pixel matters. Under that assumption they are astonishingly efficient.

Lossless formats — PNG, and WebP in its lossless mode — reproduce every pixel exactly. They compress by finding repetition, so they assume the image contains large areas of identical colour and hard boundaries. That is a screenshot, a logo, a chart or a diagram.

Almost every bad format decision is one family applied to the other family’s content.

Decide by content

A photograph. JPEG or WebP. WebP typically reaches the same visual quality at roughly 25 to 30 per cent fewer bytes, so prefer it where the destination accepts it. AVIF goes further still — often another 20 per cent — but encodes slowly and is not accepted by every upload form or older software.

A screenshot of text or an interface. PNG. JPEG’s assumption fails badly here: it renders hard edges as a halo of grey speckle, which is why compressed screenshots of text look grubby and slightly out of focus. If a form insists on JPG, crop tightly and keep the resolution high rather than shrinking the whole screen.

A logo, icon or flat illustration. PNG, or SVG if you have the vector original. Flat colour compresses to almost nothing losslessly, so there is no reason to accept the artefacts a lossy format introduces.

Anything with transparency. PNG, WebP or AVIF. JPEG has no alpha channel at all. Converting a transparent PNG to JPEG does not warn you — it just fills the transparent areas with a solid colour, usually black or white, and you find out when it is on the page.

A photograph that also needs transparency — a cut-out product shot, for instance. WebP, which does lossy compression and alpha at the same time. This is the case PNG handles worst: it will store your photograph losslessly and produce an enormous file.

The trap: a photograph saved as PNG

This is the single most common mistake, and it is invisible until you look at the file size.

PNG stores a photograph losslessly. A photograph has almost no exact repetition — every patch of sky is a slightly different blue — so there is very little for lossless compression to remove. The result is a file five to ten times larger than a high-quality JPEG of the same picture, with no visible difference whatsoever.

If you are staring at a 12 MB image of an ordinary scene and wondering why it will not fit under a limit, check the format first. Converting is often the entire fix, before you touch quality at all.

Compatibility, honestly

• JPEG — accepted everywhere, by everything, forever. When a form gives you no information, this is the safe answer.
• PNG — equally universal. Safe for anything flat.
• WebP — supported by every current browser and by most modern software. Upload forms are the weak point: plenty still list only JPG and PNG, and some reject WebP silently.
• AVIF — supported by current browsers, patchier in desktop applications and rare in upload forms. Excellent for a website you control, risky as a deliverable to someone else.

The rule that keeps you out of trouble: for the web, use the newest format your audience’s browsers support; for an upload form, use exactly what the form lists.

What conversion cannot do

Converting a lossy file to a different lossy format re-encodes it, and every re-encode loses a little more. Converting a heavily compressed JPEG to WebP does not recover the detail JPEG threw away — it just re-describes the damaged image, sometimes at a larger size.

Converting a lossy file to PNG is worse: it locks in every artefact losslessly and makes the file bigger. PNG is not a repair tool.

If you have the original, convert from that.

Quick reference

What you have	Use	Why
Photograph, no transparency	WebP, or JPEG if required	Lossy compression suits gradual tone
Photograph with transparency	WebP	Only common format that does both well
Screenshot of text or UI	PNG	Hard edges survive; JPEG smears them
Logo, icon, diagram	PNG or SVG	Flat colour compresses to almost nothing
Anything for an upload form	Exactly what the form lists	Compatibility beats efficiency

If you need to move between them, the image format converter — in build now — will do it in your browser and warn you before a conversion costs you something. The Image Lab lists what is live today.