PNG vs GIF — Which Should You Use?

Choose PNG when

Every still image, without exception. PNG has millions of colours to GIF’s 256, smooth transparency instead of a single hard-edged transparent colour, and smaller files.

Choose GIF when

Short looping animation where the audience or the platform will not take a video. That is the only thing GIF still does that PNG does not.

The thing that catches people out

GIF’s 256-colour limit is what makes a photograph look banded and speckled in one. That is not a compression setting; it is the format.

What PNG to GIF 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 GIF 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 GIF. — A photographic scene — smooth gradients, soft edges, grain. This is the case GIF 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. GIF 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 GIF. — 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	GIF
Full name	Portable Network Graphics	Graphics Interchange Format
Extension	.png	.gif
Media type	image/png	image/gif
Compression	Lossless — nothing is discarded	Lossless — nothing is discarded
This site can write it	Yes	Yes

Decided? Convert it here

Where these figures come from

The claims this page makes about PNG and GIF 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
Graphics Interchange Format, Version 89a
W3C — GIF’s 256-colour palette limit