PNG vs JPG
One is lossless, one is not — and picking the wrong one is the single most common image mistake on the web.
The rule that covers most cases
Photographs go in JPG. Everything with sharp edges, flat colour or text — screenshots, logos, icons, diagrams, charts — goes in PNG. Anything that needs transparency must be PNG, because JPG has no alpha channel at all.
Getting this backwards is expensive in both directions. A photograph saved as PNG is commonly five to ten times larger than it needs to be. A screenshot saved as JPG picks up visible fringing and mushy halos around every letter.
Why the split exists
JPG is designed around how human vision works: it throws away high-frequency detail and fine colour variation that the eye barely registers. That assumption holds beautifully for photographs of the real world and falls apart on a hard black-on-white edge, which is pure high-frequency detail. The result is the smeared, ringing artefacts you see around text in a JPG screenshot.
PNG compresses losslessly by finding repetition. A screenshot with large runs of identical pixels compresses enormously; a photograph, where almost every pixel differs slightly from its neighbour, barely compresses at all.
Side by side
| PNG | JPG | |
|---|---|---|
| Compression | Lossless | Lossy |
| Transparency | Full alpha channel | None |
| Photograph, 12 MP | Roughly 15–25 MB | Roughly 2–4 MB |
| Screenshot, 1920×1080 | Roughly 200–400 KB | Roughly 300–600 KB, with artefacts |
| Repeated editing | Safe — no loss per save | Degrades a little every save |
| Quality slider | Not applicable | 0–100 |
Note the screenshot row: PNG is not only cleaner there, it is usually smaller too. The "PNG is the big format" reputation comes entirely from people saving photographs in it.
What about transparency?
If any part of your image must show what is behind it — a logo over a coloured header, a product cut-out, a UI icon — PNG is the only one of the two that can do it. Converting such a PNG to JPG flattens the transparent pixels onto a solid colour.
When you must convert transparent PNG to JPG
- Choose the background colour deliberately, to match wherever the image will sit.
- White is the usual default; black is almost never what you want.
- If the background varies, keep PNG or use WebP, which supports both transparency and lossy compression.
Shrinking a PNG that has to stay a PNG
A quality slider does nothing to a PNG, because PNG is lossless by definition. There are three real levers instead:
- Reduce the colour palette. Illustrations and flat graphics often look identical at 128 or 256 colours and shrink dramatically. Gradients are where this shows first, as visible banding.
- Reduce the dimensions. Serving a 3000 px PNG into a 600 px slot wastes far more bytes than any encoder setting will recover.
- Switch to WebP. Lossless WebP is typically 20–30% smaller than PNG with identical pixels, and it keeps transparency.
The third option
For web delivery specifically, WebP largely dissolves this decision: it offers lossy compression like JPG, lossless compression like PNG, and transparency, in one format. The PNG-versus-JPG question really matters when the file is leaving your control — being emailed, printed, or uploaded somewhere that only accepts the classics.