PNG or JPG? The ten-year rule I use to decide
Dov Azencot
@DovAzencotPNG and JPG have been the two default answers to "save this image" for more than twenty years, and most people pick between them by accident — whatever the export dialog defaulted to. That works until the day you email someone a 9 MB screenshot, or ship a logo with an ugly gray halo around it, and suddenly the choice matters.
Here's the thing: the decision is genuinely simple. It comes down to one question I've been asking for about ten years, and it's never once let me down.
The one question
Is this image made of edges, or made of light?
That's it. Text, logos, icons, screenshots, diagrams, line art, anything with hard boundaries and flat regions of color — those are edges. Photographs, gradients, anything with smooth continuous tone and thousands of subtle color shifts — those are light.
Edges want PNG. Light wants JPG. Almost everything follows from that.
Why edges want PNG
PNG is lossless. Every pixel you save comes back exactly, forever, no matter how many times you re-open it. It compresses by finding runs of identical color, which is exactly what edge-based images are full of — a solid button, a white background, a black line. PNG eats that alive and stays razor sharp.
It also has an alpha channel, so it can be genuinely transparent. That's why every logo you want to drop onto a colored background should be PNG. JPG has no transparency at all — it fills those areas with white, which is where the ugly halo comes from.
The failure mode is photographs. Save a photo as PNG and it dutifully records every speck of sensor noise and every micro-gradient at full fidelity, and the file balloons. PNG isn't wasteful because it's bad. It's wasteful because it's honest about detail your eye would happily forgive.
Why light wants JPG
JPG is lossy. It throws away information your eye is bad at noticing — fine color variation, high-frequency detail — and it does this remarkably well on photographs. That's exactly the stuff a photo has to spare. The result is a file a fraction of the size, and you can't see what's missing.
Point JPG at edges, though, and it falls apart. It smears fuzzy artifacts around hard boundaries — around text especially — because sharp edges are precisely the high-frequency detail it's designed to discard. A JPG screenshot of code looks slightly dirty around every letter. That's not your monitor. That's the format working as designed on the wrong input.
The size table that settles it
Same two source images, saved both ways at sensible settings:
| Image | As PNG | As JPG |
|---|---|---|
| A photograph — 12 MP | ~14 MB | ~3 MB |
| A UI screenshot with text | ~600 KB | ~900 KB |
| A flat two-color logo | ~20 KB | ~85 KB |
Read it in both directions. The photo is nearly 5x smaller as JPG, for no visible loss. But the screenshot and the logo are bigger as JPG — and they'd look worse too, with haloing and fuzz. The format that's smaller flips completely depending on what's in the picture. That's the whole lesson in three rows.
The edge cases (there are only two worth knowing)
Transparency forces PNG. If any part of the image needs to be see-through, JPG is off the table regardless of content, because it physically cannot store an alpha channel. Even a photo cut out on a transparent background has to be PNG (or WebP).
Text-over-photo is a judgment call. A photo with a caption baked in is part light, part edge. I go JPG if it's mostly photo and accept slightly soft text, or PNG if the text has to stay crisp and I can afford the size. There's no clean winner; you pick which flaw you'd rather have.
When you already have the wrong one
Most of the time you're not choosing at export — you're stuck with a file someone already saved wrong. A photographer handed you 14 MB PNGs. A designer sent a logo as a haloed JPG. That's just a conversion.
Going the smart direction — PNG to JPG for a photo saved too heavy — is a clear win, and it runs right in your browser here so the file never leaves your device. Going the other way — JPG to PNG — is honest but limited: it makes the file lossless from here on, which is what you want before editing, but it can't un-smear artifacts the JPG already baked in. Lossy is a one-way door. Converting to PNG doesn't walk you back through it; it just stops you losing anything more.
Ask the one question — edges or light — and you'll be right basically every time. I still ask it on every export. It takes half a second and it has saved me from a lot of gray halos.
Related posts
Why I convert PNG to WebP (and the one time I don't)
PNG is a brilliant format to edit in and a wasteful one to ship. Here's what WebP actually saves you, where it saves you nothing, and the single rule I never break.
Why your iPhone photos are HEIC (and when to just make them JPG)
HEIC is a genuinely better format that half the web still can't open. Here's why Apple picked it, what you actually give up converting to JPG, and when I don't bother.
How in-browser image conversion actually works (and why I built it that way)
"Your files never leave your device" is an architecture, not a marketing line. Here's how WASM does the conversion right in your browser, and the one real limit it has.
All posts