People treat PNG, JPG, and WebP as interchangeable. They aren't. The differences are small but they compound — the wrong choice makes a website slow, an email attachment bounce, or a logo look like it was scanned in 1998.
The short version
- JPG — photographs. Lossy, small.
- PNG — screenshots, logos, anything with flat color or transparency. Lossless, larger.
- WebP — either of those but smaller. Good compatibility now, but not universal.
JPG
JPG was designed for photographs. It throws away detail your eyes are unlikely to notice — small differences in color in areas your brain glosses over. For a photo, this is a great trade: the file shrinks by 10× and you can't tell.
It is a terrible idea for screenshots, UI mockups, logos, or anything with sharp edges or flat color. JPG's compression produces halos and smears around text that get worse every time the file is re-saved.
PNG
PNG is lossless, meaning it stores the exact pixels you gave it. It's bigger — a screenshot as PNG might be 300 KB where as JPG it's 40 KB — but nothing is degraded.
It also supports transparency (an alpha channel), which JPG doesn't. If your image has a transparent background, PNG is not optional.
Use PNG for: screenshots, app icons, logos, diagrams, anything you'll composite or re-edit later.
WebP
WebP is the newer option that tries to be both: it does lossy compression like JPG and lossless compression like PNG, usually coming out smaller than either. Google built it, and every modern browser supports it.
Where it falls short is outside the browser. Emailing someone a WebP, or opening it in an older image viewer, occasionally fails. If the image is going somewhere you don't control, JPG or PNG is safer.
A decision tree
- Is there transparency? → PNG (or WebP for the web).
- Is it a photograph? → JPG (or WebP for the web).
- Is it a UI screenshot, logo, or diagram? → PNG.
- Is it going on a webpage you control and size matters? → WebP.
- Is it going somewhere unknown? → JPG for photos, PNG for everything else.
Converting between them
A conversion won't recover detail lost to earlier compression. If you started with a JPG and go to PNG, the PNG is just as fuzzy as the JPG was — it's lossless from that moment forward, not retroactively.