JPG vs PNG: which one should you actually use?

One throws away detail to stay small, the other keeps every pixel and every transparent edge. Here is how to pick without guessing.

Published Updated 6 min read

Same photo, two formats — the difference shows up in file size long before it shows up on screen.

JPG and PNG solve two different problems. JPG was designed for photographs: it discards visual information the eye is bad at noticing so the file gets dramatically smaller. PNG was designed for graphics: it keeps every pixel exactly as it was and supports a real alpha channel, so edges can be transparent. Neither is 'better' — using the wrong one is what causes blurry logos and 6 MB screenshots.

The 20-second answer

Your imageUseWhy
Photo, no transparencyJPGLossy compression handles gradients and noise efficiently
Logo, icon, UI elementPNGFlat colour stays crisp and the background can be transparent
Screenshot with textPNGJPG smears sharp text edges into coloured fringes
Product shot on whiteJPGNo transparency needed, so pay nothing for the alpha channel
Anything with a soft shadow over a pagePNGOnly alpha blends correctly over an arbitrary background

What 'lossy' actually costs you

JPG works in 8×8 pixel blocks. It converts each block into frequency information and then rounds off the high-frequency parts — the fine detail. At quality 85 that rounding is almost invisible on a photograph. At quality 50 you start to see banding in skies and halos around hard edges. The damage is permanent: re-saving a JPG at quality 90 does not restore anything, it just re-encodes an already-degraded image and loses a little more.

Transparency is the hard boundary

JPG has no alpha channel at all. When you convert a transparent PNG to JPG, something has to fill the transparent pixels, and that something is a flat colour. Our PNG to JPG tool defaults to white and lets you set any hex value, because a logo destined for a dark page needs a dark matte or you get an ugly white box. If the image will sit on more than one background colour, it has to stay PNG (or WEBP).

Real-world size differences

  • A 2000×1333 travel photo: roughly 4–6 MB as PNG, 300–600 KB as JPG at quality 85. PNG is the wrong tool here by an order of magnitude.
  • A 512×512 flat-colour logo: often smaller as PNG than as JPG, because PNG compresses runs of identical pixels extremely well.
  • A full-page screenshot with UI text: PNG stays sharp at a moderate size; a JPG of the same shot is usually smaller but visibly muddier around text.

Notice the pattern: photographic noise defeats PNG's compression, and flat colour defeats JPG's advantage. Match the format to the content, not to habit.

Why 'compressing' a PNG often does nothing

PNG is lossless, so there is no quality slider to turn down. A browser-based re-encode of a PNG frequently produces a file the same size or slightly larger, because the original was already saved by a well-tuned encoder. The three things that genuinely shrink a PNG are: reducing its pixel dimensions, reducing its colour palette, or switching format to WEBP or JPG. That is why our PNG compressor asks you to pick an output format instead of pretending a slider will help.

A checklist you can apply in five seconds

  • Does any part of it need to be see-through? → PNG (or WEBP).
  • Is it a photograph going on a web page? → JPG at quality 75–85.
  • Is it text, a chart or a UI screenshot? → PNG.
  • Is it going into another editor as a working file? → PNG, so you don't stack generation loss.
  • Is it still too big after choosing? → Resize the dimensions first, then adjust quality.

Tools for this