JPG, PNG, WebP or AVIF? Picking the Right Image Format Every Time

Save the same photo as a PNG and as a JPG and you will get two files that look nearly identical — and differ in size by a factor of five or more. Nothing about the image changed. What changed is the language used to describe it, and each language has a different genius: one for photographs, one for graphics, one for the web's need for speed. Choosing wrongly does not just waste disk space; on the web it directly slows pages down and burns visitors' data.

The good news is that the whole topic, which sounds like it requires an engineering degree, actually reduces to one concept and a handful of rules. The concept: lossy versus lossless compression. Master that, and every format decision becomes obvious.

Lossless compression is a perfect packing system: the file gets smaller, but every single original pixel can be reconstructed exactly. Nothing is lost, ever. PNG works this way, and it is why PNG is beloved for logos, text, screenshots and flat graphics — areas of solid colour compress beautifully, and sharp edges stay sharp. It is also why a photograph saved as PNG is enormous: a photo is millions of subtly different pixels, and a perfect-packing system cannot find much to squeeze without keeping everything.

Lossy compression makes a different trade: it throws away detail human eyes are bad at noticing, in exchange for dramatically smaller files. JPG is the classic example, and it is genuinely clever about it — our eyes care far less about exact colour shifts than about brightness, so JPG stores colour at lower resolution and discards fine distinctions we would never perceive. A camera photo at quality 80 looks essentially identical to the original at a fraction of the size. Push the compression harder, though, and the discarded details stop being invisible: blocky patches around sharp edges, the famous 'JPG artifacts'. Lossy formats are a dial, not a switch — the art is finding the setting where savings are huge and damage is not.

The decision between them is simpler than most people fear. Photographs, gradients, anything with soft continuous tones: JPG (or a modern successor). Sharp graphics — logos, icons, diagrams, text, screenshots, anything with transparency: PNG. Two special properties settle the edge cases: PNG supports transparency (JPG does not — that 'transparent background' you need for a logo is a PNG job), and PNG is lossless (so any image you intend to edit repeatedly should start life as PNG or a camera raw file, never as a re-saved JPG).

That last point deserves emphasis because it is the mistake people regret. Every re-save of a JPG re-compresses it, stacking another round of quality loss on the last — the digital equivalent of photocopying a photocopy. The professional workflow is lossless while editing, lossy only at the moment of export. Do the opposite — edit, save, edit, save as JPG — and by the tenth save your image will wear every cut on its face.

In 2010 Google asked an impertinent question: what if we simply built a better JPG? WebP was the answer — a modern format supporting both lossy and lossless modes, transparency on top of both, and compression that typically beats JPG by 25-35% at visually equivalent quality. For a decade the catch was support: browsers outside Chrome could not touch it. That era is over. Every major browser now renders WebP, and it has become the workhorse of the modern web — most sites serving images today are serving WebP to a majority of visitors without those visitors ever noticing.

Practically, WebP is now the safe default for photos on the web, and a surprisingly good option for graphics too, since its lossless mode handles flat colour and transparency well. The remaining friction is tooling on your desktop: some older applications cannot open it, which occasionally matters when handing files to others. As a rule of thumb: photos destined for a website — WebP; a photo destined for a client who might open it in 2015-era software — JPG.

The newest contender, AVIF, comes from the same compression technology behind modern video standards, applied to still images. The results are striking: files typically 20-50% smaller than WebP at comparable quality, with particular strength in the hardest cases — gradients that band badly in JPG, dark scenes where other formats show blockiness. All major browsers support it now. The trade-offs are speed and ecosystem: AVIF encodes noticeably slower (a real consideration when processing many images), and older software and platforms remain spotty on support.

The professional web pattern has settled into a graceful rotation: serve AVIF first, fall back to WebP, fall back to JPG — the browser takes the best one it understands. For everyday users the summary is calmer: AVIF and WebP are why websites keep getting faster without anyone announcing it, and if your image tool offers either, choosing it for web images is almost always a win.

Everything above compresses (pun intended) into rules you can hold in your head. For the web: photos as WebP or AVIF, quality around 75-80 — visually transparent, hugely smaller. Graphics, logos, screenshots, transparency as PNG (or WebP lossless). Master files you will keep editing: lossless formats only, and export copies for sharing. For maximum compatibility with unknown recipients: JPG for photos, PNG for graphics — the pair that opens anywhere, on anything, back to the 1990s.

One final habit worth building, since you now know the stakes: before uploading or sending any image, glance at its size. A 6 MB photo in an email is not a virtue of quality — it is a format mistake, usually fixable to under half a megabyte with zero visible difference. The people who seem 'good with computers' are largely people who check this number and know which dial to turn.