WebP, JPG, AVIF or PNG: which format for which job

Most format comparisons line up three codecs and measure them against each other. That is a useful thing to have — there is one on this site that does exactly it for the lossy three — but it is not the question people usually have.

The question people usually have is: I have this particular picture, and it is going in this particular place. What do I save it as?

That is a different article, because the answer depends far more on what is in the image than on which codec won a benchmark. So this one is organised by job.

The one distinction that decides most of it

Before the use cases, the split that explains them.

Lossy formats — JPEG, WebP in its lossy mode, AVIF in its lossy mode — throw information away. They work by exploiting what human vision does not notice: fine colour detail, subtle gradients in busy areas, high-frequency texture. On a photograph this is enormously effective, because a photograph is mostly texture and almost none of it is load-bearing.

Lossless formats — PNG, and WebP and AVIF in their lossless modes — keep every pixel exactly. They compress by prediction: guess each pixel from its neighbours, store only the difference. When the neighbours are identical, the differences are all zero, and zeros compress to almost nothing.

That mechanism is the whole story. Prediction works when neighbours are similar and fails when they are not. A flat blue rectangle is thousands of identical pixels and compresses to a rounding error. A photograph of grass is thousands of pixels that each disagree slightly with the one beside them, so the residuals are noise, and noise does not compress.

Get that one idea and every case below follows from it.

A photograph on a web page

Lossy, and the newest format your audience can display. In practice that means WebP as the safe default, AVIF where you can serve a fallback.

Photographs are the case lossy compression was designed for. The saving over a lossless copy is not marginal, it is an order of magnitude, and at a sensible quality setting nobody can see the difference at normal viewing size.

Do not save a photograph as PNG. This is the single most common and most expensive format mistake on the web: the same photograph is routinely several times larger as a PNG, and it will not look any better, because there was never any visible detail for the extra bytes to preserve. The bytes are spent faithfully recording sensor noise.

If you have inherited a folder of PNG photographs, converting them to JPG or to WebP is usually the largest single win available on a site.

A logo, an icon, a diagram, a chart

Lossless. PNG, or lossless WebP if everything reading it is a browser.

This is prediction working perfectly. Flat areas of colour, hard edges, a limited palette — the residuals are almost all zero. A logo is dramatically smaller as a PNG than as a JPEG, and the PNG is exact.

It also avoids the specific ugliness lossy compression inflicts on hard edges. JPEG works in blocks, and along a sharp boundary between two flat colours it produces “ringing” — a faint halo of wrong colour that follows the edge. On a photograph that is invisible. On a logo it looks like the file is damaged, because in a sense it is.

For anything vector in origin — a logo, an icon set, a chart you generated — the honest answer is that SVG beats all of these when the environment accepts it. It has no resolution at all, so it is sharp everywhere. Reach for a raster format only when SVG is not an option.

A screenshot

Lossless, almost always — and this surprises people, because a screenshot looks like a picture.

A screenshot is mostly interface: flat panels, straight lines and, critically, text. Text is the worst possible input for lossy compression. Letterforms are hard edges at small scale, exactly where blocking and ringing show up most, and the eye is extraordinarily good at spotting when letters are wrong because it has spent decades reading them.

A JPEG screenshot of a code editor at quality 80 looks smeared in a way a JPEG photograph at quality 80 does not. Same setting, completely different result, because the content is different.

The exception is a screenshot of a photograph or a video frame — a still from a film, a screengrab of a map with satellite imagery. That is a photograph wearing a screenshot’s clothes, and it should be treated as one.

Anything that needs transparency

PNG, WebP or AVIF. Not JPEG, which has no alpha channel at all.

This trips people up regularly because the failure is silent-ish: convert a transparent PNG to JPEG and the transparent areas do not disappear, they turn into a colour — usually white, sometimes black, and if your logo was white text on transparency, you now have an invisible logo.

If you must go to JPEG, decide the background colour deliberately rather than accepting the default. The converter puts that colour in front of you as a control rather than applying one silently, for exactly this reason.

One detail worth knowing: PNG stores a real alpha channel — 256 levels of opacity at the usual 8 bits per sample, and the format allows 16 — so it supports partial transparency — soft shadows, antialiased edges, glass effects. The old GIF-style single transparent colour gives you a hard, jagged edge. If your cut-out looks like it was done with scissors, that is why.

Something going to print

Lossless, and at the resolution the printer asks for rather than the one that looks fine on screen.

Print is where lossy artefacts that are invisible on a 15-inch display at 100% become visible on paper at 300 dpi. It is also where the colour profile matters, and where a format that carries an embedded ICC profile is worth having. One caveat if the printer asks for CMYK: PNG has no CMYK mode, so that master is a TIFF, not a PNG.

The practical rule: keep a lossless master, and generate the lossy copies from it. Which leads to the last case, and the most important one.

The master copy you keep

Lossless, always. This is a rule with no exceptions worth the words.

Lossy compression is a one-way door. Every save discards information permanently, and it discards it again on the next save — the artefacts introduced by the first pass become part of the image the second pass is trying to compress, and it faithfully preserves them while adding its own. Do this five times and you have the washed-out, blocky look of an image that has been screenshotted and re-shared across four platforms.

You cannot repair this afterwards. There is no filter that puts the information back, because it is not there.

So: edit from the original. Export lossy copies for distribution. Never edit the exported copy and re-export it. If the only version you have has already been through the mill, at least stop the bleeding — do the resize and the format change in one step rather than saving a JPEG, opening it, and saving it again.

A file you have to email or upload somewhere

Whatever gets under the limit while staying legible — and the first lever is dimensions, not format.

An upload form does not care about your format philosophy, it cares about a byte count. Halving the width and height removes three quarters of the pixels, which is almost always a bigger saving than any format change and does far less visible damage than pushing quality down to 40.

Change the format second. JPG to WebP on a photograph typically buys a meaningful reduction at the same visual quality, and costs nothing if the recipient is a browser.

But check what the recipient accepts before you get clever. A surprising number of government portals and older systems accept JPEG and nothing else, and will reject a WebP without explaining why. Being technically correct about compression efficiency is no help if the form will not take the file.

The whole thing in five lines

• Photograph → lossy. WebP, or AVIF with a fallback, or JPEG when compatibility rules.
• Flat colour, edges, text, screenshots → lossless. PNG, or lossless WebP.
• Needs transparency → anything except JPEG.
• Master copy → lossless, and never edit an exported copy.
• Hitting a size limit → resize first, change format second, drop quality last.