Comparison ยท 4 min read

JPG, PNG, WebP or AVIF: which one to save as

Four formats, three questions that decide between them, and the two situations where the newest option is the wrong answer.

Format arguments usually get conducted as league tables โ€” this one is 30% smaller than that one โ€” which is true, unhelpful, and the reason people end up with photographs saved as PNG and screenshots saved as JPEG. The format is not better or worse in the abstract; it is a fit or a misfit for the picture and the destination.

Three questions settle almost every case: is this a photograph or a graphic, does it need transparency, and where is it going?

Question one: photograph or graphic?

A photograph is continuous tone โ€” millions of subtly different colours, no hard edges, noise everywhere. A graphic is the opposite: flat areas of colour, sharp boundaries, text, few distinct colours. Screenshots, logos, diagrams, charts and line art are graphics.

Lossy formats (JPEG, and by default WebP and AVIF) are built for photographs. They describe blocks approximately, which is invisible in a face and painfully visible around text โ€” the halo you see on a JPEG screenshot is the format doing exactly what it was designed to do to material it was not designed for.

Lossless formats (PNG, and the lossless modes of WebP) store the picture exactly. On a graphic that is both perfect and small, because flat colour compresses beautifully. On a photograph it is perfect and enormous, because noise does not compress at all.

Question two: does it need transparency?

JPEG has no alpha channel. None. If any part of the image must show what is behind it โ€” a logo on a coloured background, a cut-out product shot โ€” JPEG is disqualified regardless of everything else. PNG, WebP and AVIF all support transparency.

This is the single most common cause of the white box around a logo: the file was saved as JPEG somewhere in its history and the transparency was flattened to white, and no later conversion brings it back.

Question three: where is it going?

A web page you control. AVIF first, WebP as the fallback. Both are supported by every current major browser. AVIF is typically the smallest at a given quality, sometimes dramatically so on flat or gradient-heavy images; WebP is close behind and encodes faster.

Somebody else's platform. Check what it accepts before you optimise. A large number of upload forms, printers, government portals and older content systems still accept only JPEG and PNG, and a rejected AVIF is 100% larger than a JPEG that went through.

Email or a document. JPEG and PNG. Mail clients and word processors are the slowest software in the world to adopt new formats, and a picture that will not display is worse than one that is 40 KB bigger.

An archive or a master copy. Keep the original. Every lossy re-encode loses a little more, and losses compound โ€” a JPEG opened, edited and re-saved five times is visibly worse than the one saved once.

The two places AVIF is the wrong answer

When the recipient cannot open it. Browser support is broad; support in desktop applications, email clients, and the software behind upload forms is much patchier. If you do not control what opens the file, this matters more than the byte count.

On small graphics with hard edges. At very small sizes and on flat line art, AVIF's advantage narrows and its encoder can soften edges that PNG keeps exact. A 4 KB PNG icon does not need replacing with a 3 KB AVIF that looks slightly worse.

A note on GIF

GIF is limited to 256 colours and compresses badly, and the only reason it survives is animation. For an animated image, an MP4 or a WebM video is smaller and better; where a video will not do, animated WebP is a straight improvement over GIF. For a still image there is no case for it at all.

The short version

Photograph on a page you control: AVIF or WebP. Photograph going anywhere else: JPEG. Graphic, screenshot or anything with text: PNG, or lossless WebP if size matters and you control the destination. Needs transparency: anything but JPEG. Master copy: keep the original, whatever it is.

Convert Image handles all of these in the browser, so trying two and comparing costs nothing.

Questions

Things people ask about this

Is WebP or AVIF better?

AVIF is usually smaller at the same visual quality, especially on gradients and flat colour. WebP encodes faster and is supported in more places outside the browser. For the web either is a large improvement on JPEG.

Will converting to AVIF break my images on older devices?

Current major browsers all support it. Older browsers, some email clients and a lot of desktop and upload software do not โ€” so it depends entirely on where the image is going, not on how old anybody's phone is.

Does converting from JPEG to WebP restore quality?

No. Whatever the JPEG threw away is gone, and re-encoding cannot invent it back. Converting an already-lossy file can only preserve or lose further โ€” always convert from the best original you have.

Should I use PNG for photographs to avoid quality loss?

Only for a master copy you are archiving. A PNG photograph is commonly five to ten times the size of a good JPEG for a difference nobody can see at normal viewing sizes.