JPG, PNG, or WEBP: Which One, When

Lossy and lossless, in one section

A lossless format promises that the pixels you decode are bit-for-bit the pixels that were encoded. It achieves compression by finding genuine redundancy — long runs of identical color, rows that resemble the row above — and describing it more compactly. Nothing is discarded, so the file can be re-saved endlessly with no degradation. PNG works this way, as does WEBP in its lossless mode.

A lossy format compresses far harder by deciding that some information is not worth keeping. JPG transforms the image into frequency components, keeps the coarse ones precisely, and stores the fine detail crudely or not at all — betting, correctly, that human vision is much more sensitive to broad shapes than to subtle high-frequency variation. It also typically stores color at half the resolution of brightness, because our eyes are far sharper at detecting brightness edges than color ones. The result is a file a fraction of the lossless size that looks, to a person, essentially identical.

Neither approach is better. They are answers to different questions. Lossy compression is a spectacular deal on photographs, where the discarded detail was sensor noise and gradations nobody can see. It is a bad deal on a screenshot, where the "fine detail" it throws away is the crisp edge of every letter.

What each one is actually for

JPG is the photograph format. Continuous tone, smooth gradients, natural subjects, no hard edges — this is exactly the material its assumptions were designed around, and it is superb at it. It is also the most universally supported image format in existence: nothing made in the last thirty years refuses a JPG. It has no transparency at all, and it visibly struggles with sharp black-on-white edges, where it produces faint ringing and smudging around the contours.

PNG is the screenshot, diagram, and transparency format. Flat color regions, text, line art, user interfaces, logos, icons, charts. Every pixel comes back exactly as it went in, so text stays razor-sharp and a solid background stays one solid value. It supports a full alpha channel with 256 levels of transparency, which is what makes it the format for anything that has to sit on top of something else. On a photograph it is technically perfect and practically a mistake, for reasons in the next section.

WEBP is the web delivery format. It offers both a lossy and a lossless mode, supports transparency in both — a combination JPG cannot do at all and PNG can only do at lossless sizes — and typically produces files noticeably smaller than an equivalent-quality JPG or PNG, commonly on the order of a quarter to a third smaller. Every current major browser displays it. Where it falls down is outside the browser: older desktop software, some print workflows, some publishing systems, and plenty of upload forms still do not accept it. It also has a hard maximum dimension of 16,383 pixels on a side, which very large panoramas and scans can genuinely exceed.

Why a PNG of a photo is enormous

Because lossless compression has to preserve everything, and a photograph is full of things that do not compress. Every image sensor produces noise — a fine random speckle across every surface, invisible at a glance and present in every pixel. To a lossless encoder that noise is real data, and random data is incompressible by definition. It must all be preserved, faithfully, byte after byte.

The practical result is a PNG of a camera photo that runs several times the size of a high-quality JPG of the same image, with no visible difference to justify it. This is how people end up emailing a 30 MB picture, or hitting an upload limit on a photo that should have been two megabytes. If you are looking at a large PNG and the content is a photograph, a conversion to JPG is close to free money.

The mirror-image mistake is a screenshot saved as JPG. The file barely shrinks — JPG has no good way to compress the sharp edges that dominate the image — and the text picks up a soft halo that gets worse with every re-save. Screenshots want PNG, and always did.

Generation loss: why re-saving degrades

Each time an image is saved lossily, the encoder discards detail based on what remains. Save, edit, save again, and the second pass is discarding detail from an image that has already been thinned — the approximations compound. A few generations are usually invisible; a dozen are not. The damage shows up first as blocky patches in smooth areas like sky and skin, and as halos around text and hard edges.

Cropping and rotating make it worse, because JPG compresses in a fixed grid of small blocks. An edit that shifts the image relative to that grid forces every block to be recomputed from already-degraded data, so an innocuous crop-and-save costs more than a straight re-save would.

Two consequences follow. First, keep an original. Edit from the highest-quality copy you have and export a fresh lossy file each time, rather than repeatedly editing the export. Second — and this is the one that trips people up — converting a JPG to PNG does not repair it. Lossless compression preserves whatever it is given, and what it is given is an image with the detail already removed and the artifacts already baked in. You get a much larger file containing precisely the same flaws. PNG protects an image going forward; it cannot restore one.

The decision list

A photograph going anywhere: JPG. Universal, small, and lossy in ways that do not matter on continuous-tone content. Use a high quality setting and stop worrying about it.

A screenshot, diagram, chart, scan of text, or line art: PNG. The edges stay sharp, the file is usually smaller than a JPG of the same content anyway, and repeated saves cost nothing.

Anything that needs transparency: PNG. Logos over colored backgrounds, icons, cut-out product shots, overlays. If it also needs to be small and only ever appears on the web, lossy WEBP does the same job at a fraction of the size.

Images you control end to end on a website: WEBP. Smaller pages, faster loads, transparency available. Keep a JPG or PNG fallback for anything that might be downloaded and reused elsewhere.

Anything you are sending to another person, a form, or a printer: JPG or PNG. Compatibility beats efficiency the moment the file leaves your control. This is the single most common reason to convert a WEBP.

An image you will edit repeatedly: keep a lossless master. PNG is fine for this. Export lossy copies for delivery, and never let the exported copy become the thing you keep editing.

One last habit worth adopting: convert in one direction only, at the last possible moment. Every extra hop through a lossy format is detail you will not get back, and most files people describe as "low quality" got that way through three or four well-meant conversions rather than one bad decision.