JPG, PNG, WebP or AVIF?

Most format advice starts from the wrong question. “Which format is best?” has no answer, because formats are not competing at the same thing. The useful question is “what is this image, and where is it going?”

Answer those two and the format picks itself.

The thirty-second version

  • Photograph, going to another person or a form: JPG
  • Photograph, on a website you control: WebP or AVIF, with a JPG fallback
  • Screenshot, logo, diagram, or anything with text: PNG
  • Anything with a transparent background: PNG or WebP — never JPG
  • Logo or icon shown at multiple sizes: SVG, converted to PNG when something rejects it
  • Anything a print shop or official form asked for: JPG or PDF

That covers the overwhelming majority of decisions. The rest of this page explains why.

Lossy versus lossless is the first fork

Lossy formats — JPG, WebP in lossy mode, AVIF, HEIC — throw away information the eye is unlikely to miss. They achieve dramatic size reductions on photographs, where detail is noisy and irregular. They handle sharp edges and flat colour badly, because those are exactly what their compression model does not expect.

Lossless formats — PNG, BMP, TIFF, WebP in lossless mode — store every pixel exactly. They are larger, sometimes by an order of magnitude, but nothing degrades no matter how often you re-save.

So: photographs are lossy candidates. Screenshots, logos, line art, diagrams and anything containing text are lossless candidates. That single distinction resolves most format arguments.

Transparency narrows it further

If any part of the image must be see-through, JPG is eliminated. It has no alpha channel at all. Converting a transparent PNG to JPG fills those areas with a solid colour — usually white, which looks fine on a white page and obviously wrong anywhere else.

That leaves PNG, WebP, AVIF and GIF. PNG is the safe default. WebP is smaller and equally capable if everything downstream accepts it. GIF only offers on/off transparency, so soft edges come out jagged.

Where it is going decides the rest

This is the part people underweight. A technically superior format that the recipient cannot open is not superior in any sense that matters.

Going to a person: JPG or PNG. Not WebP, not AVIF, not HEIC. You do not know what software they have, and a file that will not open reflects on you rather than on the format.

Going to a website you control: WebP or AVIF, served with a fallback. You control delivery, the savings are real, and Core Web Vitals reward them.

Going to a print shop: ask them. Usually TIFF or PDF, sometimes high-quality JPG. Never WebP.

Going to an upload form: JPG unless it says otherwise. Forms with hard-coded extension checks are everywhere and their error messages are uniformly useless.

What about AVIF and JPEG XL?

AVIF is genuinely excellent — typically 30 to 50 per cent smaller than JPG at matching quality, with transparency and HDR support. All current browsers decode it. Encoding is slow, and support outside browsers is thin. Use it on your own site; do not send it to people.

JPEG XL is technically the most interesting of the lot, with better compression than AVIF at high quality and the ability to losslessly recompress existing JPGs. But Chrome and Firefox do not ship it by default, which makes it unusable for anything you need other people to open. Treat it as an archival format.

A worked example

You have a product photo with a transparent background for an online shop.

What is it? A photograph — so lossy compression suits the content. But it needs transparency, which eliminates JPG. Where is it going? A website you control.

So: WebP in lossy mode. It gives you photographic compression and an alpha channel simultaneously, which is the one thing WebP does that neither JPG nor PNG can. Keep a PNG master for editing, and export a JPG on a white background for anywhere that rejects WebP.

That is the whole method: what the content is, whether it needs transparency, and where it is going. Nothing else about the format specifications changes the answer.

Cookie preferences

Choose what you are happy for us to store on your device. You can change this at any time from the “Cookie settings” link in the footer.