The five-second answer
Photograph → JPG. Graphics, text, or transparency → PNG. That single rule is right about 95% of the time. The rest of this page explains why, covers the exceptions, and shows what it costs to choose wrong.
| JPG | PNG | |
|---|---|---|
| Compression | Lossy — discards invisible detail | Lossless — every pixel exact |
| Best for | Photos, gradients, complex scenes | Logos, UI, screenshots, line art |
| Transparency | No | Yes (full alpha channel) |
| Photo file size | Small (baseline) | Huge — 5–10× larger |
| Sharp-edge quality | Halo artifacts around text | Pixel-perfect |
| Animation | No | No (APNG exists but is rare) |
Why photos belong in JPG
JPG compression works in the frequency domain: it splits the image into 8×8 blocks and discards high-frequency detail human vision barely registers. Photographs are full of such detail — noise, grain, soft texture — so JPG shrinks them dramatically with no visible change. A 12 MP photo: ~6 MB as PNG, ~800 KB as JPG at quality 85, and nobody can tell them apart on screen.
Save that photo as PNG and you pay 5–10× the bytes to preserve sensor noise. Lossless fidelity to noise is worthless — that is why no photo platform serves PNGs.
Why graphics belong in PNG
Flip the image type and the logic flips. Logos, charts, screenshots and text have exactly what JPG handles worst: sharp edges. JPG's frequency rounding turns crisp letter edges into faint ripples ("mosquito noise") — the smudgy halo you've seen around text in badly saved screenshots. PNG stores those edges exactly, and because flat-color areas compress beautifully in PNG, the files stay reasonable.
PNG is also the only one of the pair with transparency — any logo placed over varying backgrounds needs it. JPG silently fills transparent areas with a solid color.
The exceptions worth knowing
- Screenshot containing a photo (e.g. a photo open in an app): mixed content — WebP handles both parts well; JPG at high quality is acceptable.
- Photo that needs transparency (product cutouts): PNG works but is heavy; WebP gives transparency at a quarter of the size.
- Image that will be edited repeatedly: keep a lossless master (PNG or the original), because each JPG re-save compounds loss. Details in Lossy vs Lossless.
And where WebP replaces both
For anything displayed in a browser, WebP now does both jobs better: photo-style lossy compression 25–35% smaller than JPG, lossless mode smaller than PNG, and full transparency in either mode. All major browsers have supported it since 2020. Keep JPG/PNG for maximum-compatibility uploads and email; reach for WebP on the web — comparison in WebP vs JPG.