PNG vs JPG — Which Should You Use?

Choose PNG when

Screenshots, logos, diagrams, line art and anything that has to keep a transparent background. PNG stores every pixel exactly, so text stays crisp and a cut-out stays cut out.

Choose JPG when

Photographs, and anything that looks like one — soft gradients, no hard edges. JPG throws away detail the eye is poor at noticing, which on a photograph is close to free and typically saves ninety per cent.

The thing that catches people out

JPG has no transparency at all. A PNG with a transparent background becomes a JPG with a solid one, usually white or black, and no setting brings it back.

What PNG to JPG actually does

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as PNG. — A photographic scene — smooth gradients, soft edges, grain. This is the case JPG is designed for or against, and the figures show which. Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

A generated landscape with a low sun and three ridges, used to show what JPEG does to continuous tone. Shown as JPG. — A photographic scene — smooth gradients, soft edges, grain. This is the case JPG is designed for or against, and the figures show which. Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

A generated badge: a circular gradient on a transparent background with a white bar across it, used to show what each format does with transparency and with hundreds of shades. Shown as PNG. — A transparent background and a gradient across the shape. JPG either keeps both, keeps one, or fills the transparency with a solid colour — which is the difference that catches people out. Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as PNG. — Flat colour and hard edges, as in an interface, a chart or a logo. Very different behaviour from the photograph above, and the reason the answer is "it depends what is in the file". Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

A generated application window with a sidebar, a table and a bar chart, used to show what JPEG does to flat colour and hard edges. Shown as JPG. — Flat colour and hard edges, as in an interface, a chart or a logo. Very different behaviour from the photograph above, and the reason the answer is "it depends what is in the file". Both images are drawn in code and encoded by the same converter that runs on this page, so the sizes are this site's own output.

Side by side

	PNG	JPG
Full name	Portable Network Graphics	JPEG Image
Extension	.png	.jpg, .jpeg, .jpe
Media type	image/png	image/jpeg
Compression	Lossless — nothing is discarded	Lossy — file size is bought with quality
This site can write it	Yes	Yes

Decided? Convert it here

Where these figures come from

The claims this page makes about PNG and JPG are checkable, and these are the documents that settle them.

Portable Network Graphics (PNG) Specification, Third Edition
W3C — PNG’s lossless compression and its alpha channel
T.81: Digital compression and coding of continuous-tone still images
ITU-T — How JPEG discards detail, and why it suits continuous tone