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

Export dialogs offer JPEG and PNG side by side as if they were interchangeable. They are not — each is excellent at what the other is worst at, and picking wrong costs you either quality or file size. The good news is that the decision reduces to one question: is it a photo, or does it have sharp edges?

How JPEG compresses

JPEG was designed for photographs. It divides the image into 8×8 pixel blocks and discards the visual information human eyes are least sensitive to — fine colour variation, subtle high-frequency detail. Photographic content is full of such detail, which is why JPEG can throw away 90% of the data with no visible change: a 20 MB photo becomes 2 MB and looks identical at normal viewing size.

The cost is that JPEG is lossy — the discarded data is gone. Save a JPEG, edit, save again, and each generation degrades slightly. And the discarding strategy has a specific failure mode: sharp, high-contrast edges. Text, logos, line art and screenshots come out with faint smudged halos — compression artefacts — around every edge, because an abrupt black-to-white transition is precisely the high-frequency information JPEG is built to discard.

How PNG compresses

PNG is lossless: it stores the image exactly, compressing by finding repetition rather than discarding detail. Flat areas of identical colour, repeated patterns, hard edges — all compress beautifully, which makes PNG ideal for screenshots, diagrams, logos and text. A screenshot of a document might be smaller as PNG than as a high-quality JPEG, and perfectly sharp.

Point PNG at a photograph, though, and there is almost no exact repetition to find — every pixel differs subtly from its neighbours. The file comes out enormous: commonly 5–10× the size of a visually identical JPEG.

PNG also supports transparency, which JPEG does not. A logo that must sit on any background needs PNG (or a vector format). Convert a transparent PNG to JPEG and the transparent region must be filled with something — tools that do not let you choose will silently fill it, sometimes with black. The converter here asks for a background colour instead of guessing.

The rule

Photographs → JPEG. Sharp edges, text, or transparency → PNG.

Nearly every real decision falls 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 (0–100) controls how aggressively data is discarded. The useful range is narrower than the slider suggests:

• 90–100: near-transparent quality, rapidly growing files. 95→100 can double the size for no visible gain.
• 75–85: the sweet spot for almost everything. This is why tools here default to 80%.
• 50–70: visible softening on close inspection; fine for thumbnails.
• Below 50: obvious blockiness, especially in gradients like skies.

One asymmetry worth knowing: you can always go down, never back up. Re-saving a low-quality JPEG at quality 100 produces a large file that still looks bad — the detail was discarded at the first save.

Where WebP fits

WebP, the newer format both tools here also support, does both jobs: lossy compression around 25–30% smaller than equivalent JPEG, lossless mode with transparency like PNG. Browser support has been universal for years, so for web use it is often the best answer. The reasons JPEG and PNG persist are compatibility with non-browser software — email clients, office suites, older tools — and sheer inertia. When a WebP is rejected somewhere, converting to the appropriate classic format takes seconds, and the photo-vs-edges rule tells you which one to pick.