JPEG vs PNG: a practical rule that covers almost every case

Export dialogs put JPEG and PNG side by side as though they’re interchangeable. They’re closer to opposites: each one is excellent at exactly the thing the other handles worst, and picking wrong costs you either quality or megabytes.

Happily, the decision almost always collapses into a single question. Is it a photo, or does it have sharp edges?

How JPEG compresses

JPEG was built for photographs. It chops the image into 8×8 pixel blocks and throws away the visual information your eyes are least likely to miss: fine colour variation, subtle high-frequency detail. Photographic content is full of exactly that, so JPEG can discard 90% of the data and you won’t see it. A 20 MB photo lands at 2 MB and looks identical at normal viewing size.

The catch is that JPEG is lossy. Whatever it discards is gone, so saving, editing and saving again degrades the image a little each round.

There’s also one thing JPEG is specifically bad at, and that’s sharp, high-contrast edges. Text, logos, line art and screenshots come back with faint smudged halos around every edge. Those are compression artefacts, and they appear because an abrupt black-to-white transition is precisely the high-frequency information JPEG was designed to throw out.

How PNG compresses

PNG is lossless. It stores the image exactly and finds its savings in repetition instead of in discarded detail. Flat areas of one colour, repeated patterns, hard edges: all of that compresses beautifully, which makes PNG the right choice for screenshots, diagrams, logos and text. A screenshot of a document can easily come out smaller as a PNG than as a high-quality JPEG, and perfectly sharp into the bargain.

Point it at a photograph and the picture reverses. There’s almost no exact repetition to find, because every pixel differs slightly from its neighbours. The file comes out enormous, commonly 5–10 times the size of a JPEG that looks the same.

PNG also does transparency, which JPEG can’t. A logo that has to sit on any background needs PNG, or a vector format. Going the other way, something has to fill the transparent region, and tools that don’t ask you will pick for you. Sometimes they pick black. The converter here asks for a background colour instead of guessing.

The rule

Photographs go to JPEG. Sharp edges, text, or transparency go to PNG.

Almost every real decision falls straight out of that line:

Content	Format	Why
Photo for the web	JPEG ~80%	Huge saving, invisible loss
Screenshot of an app or document	PNG	Sharp text, often smaller too
Logo over varying backgrounds	PNG	Transparency
Scanned document page	JPEG	It is a photograph of paper
Chart or diagram	PNG	Flat colour and hard lines
Photo mid-editing	PNG (or the editor’s format)	No generational loss

What the quality slider actually does

JPEG’s quality setting runs from 0 to 100 and controls how aggressively data gets discarded. The genuinely useful range is narrower than the slider implies:

• 90–100: near-perfect, and files grow fast. Going from 95 to 100 can double the size with nothing visible to show for it.
• 75–85: the sweet spot for almost everything, and why the tools here default to 80%.
• 50–70: softening you’d notice on close inspection. Fine for thumbnails.
• Below 50: obvious blockiness, worst in gradients like skies.

One asymmetry catches people out, so it’s worth stating plainly: you can always go down, never back up. Re-saving a low-quality JPEG at quality 100 gives you a big file that still looks bad. The detail went in the first save and it isn’t coming back.

Where WebP fits

WebP does both jobs. Lossy compression around 25–30% smaller than the equivalent JPEG, plus a lossless mode with transparency like PNG. Both tools here support it, browser support has been universal for years, and for anything web-facing it’s often just the better answer.

So why do JPEG and PNG persist? Compatibility with everything that isn’t a browser (email clients, office suites, older software) and plain inertia. When something rejects a WebP, converting it takes a few seconds, and the photo-versus-edges rule tells you which of the two to pick.