JPG, PNG, WEBP or AVIF: How to Actually Choose

The rule, in one line each

Almost every case is covered by four sentences. The rest of this post is why.

• Photograph, going on a website → WEBP.
• Photograph, going anywhere else (email, print, an upload form) → JPG.
• Logo, icon, screenshot, diagram, or anything with transparency → PNG, or WEBP if it is for the web.
• Animation → WEBP where it will be viewed in a browser, GIF where compatibility matters more than quality.

Why the content matters more than the format

JPG compresses by discarding high-frequency detail — the abrupt changes between neighbouring pixels. In a photograph there is very little of that, which is why JPG can throw away 90% of the data and look identical. In a screenshot of text, *everything* is high-frequency detail: every letter is a hard black edge against white. JPG attacks precisely the thing you needed preserved, which is why JPG screenshots look faintly grubby and, absurdly, are often larger than the PNG would have been.

PNG has the opposite bias. It compresses runs of identical pixels brilliantly, so a logo in four flat colours becomes tiny. Point it at a photograph — where almost no two adjacent pixels match — and it has nothing to work with, so the file balloons to three or five times the JPG.

WEBP: the default that most sites still are not using

WEBP does both jobs. It has a lossy mode that beats JPG by 25-35% at the same visual quality, a lossless mode that beats PNG by roughly the same margin, and it supports transparency and animation. There is no other widely-supported format that replaces both.

The old objection was Safari, which did not support it until version 14 in 2020. That objection expired years ago: every browser in current use handles WEBP. If your site still serves JPG and PNG everywhere, converting the images is usually the single largest page-weight win available, and it takes an afternoon.

AVIF: better, with a catch

AVIF compresses better still — roughly 50% smaller than JPG — and handles gradients without the banding that plagues both JPG and WEBP. For photographic hero images it is genuinely the best option available.

The catches are real though. Encoding is slow, which matters if you process thousands of images. Support, while good in browsers, is patchy in the tools around them: many CMSs, image editors and social platforms still choke on it. Use it where you control the pipeline, and serve WEBP as the fallback.

The transparency trap

This is the most common expensive mistake, so it is worth stating plainly: JPG cannot store transparency. Not badly — at all. There is no alpha channel in the format.

So a transparent logo saved as JPG gains a solid background, usually white, and the moment it is placed on a coloured page it appears in a white box. And no conversion can undo it: once transparency is gone it is gone, because the information was never written to the file. If your logo needs transparency, it lives in PNG, WEBP or SVG, forever.

What about SVG?

For logos, icons and simple diagrams, SVG beats everything here — it is a description of shapes rather than a grid of pixels, so it is razor-sharp at any size, usually a fraction of the file size, and it can change colour with CSS for dark mode.

It only works for vector artwork. You cannot save a photograph as a useful SVG. But if your logo came from a designer, ask for the SVG: you are probably serving a 40 KB PNG where a 3 KB SVG would look better on every screen.

One thing that beats format choice entirely

Serving an image at the right dimensions. A 4000-pixel-wide photograph displayed in an 800-pixel column wastes about 96% of its data no matter how cleverly it is compressed, and the visitor downloads every byte before the browser throws them away.

Resize first, choose the format second, compress third. Done in that order, format choice is a refinement. Done in the wrong order, it is rearranging deck chairs.