PNG vs JPG vs WebP: Which Traces Cleanest?

If you have the same logo as a PNG, a JPG and a WebP, which one should you trace? The usual answer is "PNG, because it is lossless", which is true but not very useful. It does not tell you how much worse the others are, or whether a high-quality JPG is fine.

So we measured it: the same twelve logos saved eight different ways, every file traced through our live site, and every trace scored against the logo's original vector.

How we measured it

We started from twelve hand-authored vector logos, so the correct result is known exactly. Each was rendered to an 800-pixel image and saved as:

• PNG, which is lossless.
• WebP, lossless.
• JPG at quality 95, 80, 60 and 40.
• WebP, lossy, at quality 80 and 50.

That is 96 files. Each was uploaded to our live site and traced on default settings, then scored against the original vector: the average colour error per pixel, how many paths the trace used, and the size of the SVG it produced. The script and raw results are in our repository.

The results

Source	File size	Mean error	Paths	SVG size
PNG	27 KB	0.15%	4.5	3.8 KB
WebP, lossless	10 KB	0.15%	4.5	3.8 KB
JPG, quality 95	37 KB	0.19%	4.5	3.9 KB
JPG, quality 80	22 KB	0.19%	5	4.1 KB
WebP, quality 80	11 KB	0.19%	5	3.9 KB
WebP, quality 50	8 KB	0.23%	5.5	4.0 KB
JPG, quality 60	17 KB	0.24%	6	4.3 KB
JPG, quality 40	14 KB	0.33%	7.5	7.3 KB

All figures are medians across the twelve logos.

What the numbers say

PNG and lossless WebP are identical. Same error, same paths, and the same SVG down to the byte, for all twelve logos. Lossless WebP just stores it in about a third of the space. If you have either, you have the best possible source.

Quality matters more than format. A JPG at quality 80 and a WebP at quality 80 traced the same, at 0.19% error. The WebP was half the file size. What changes the result is how hard the image was compressed, not which of the two formats compressed it.

High-quality JPGs are close, but not identical. Even at quality 95, the JPG traced measurably worse than the PNG. The error was 0.19% against 0.15%, and only 7 of the 12 logos came out within a hair of their PNG result. It traced worse than the PNG for 10 of the 12. The difference is small enough that you would rarely see it, but it points the same way almost every time.

Heavy compression costs you twice. At quality 40, the JPG was worse than the PNG for all twelve logos. The error more than doubled to 0.33%, the median trace needed 7.5 paths instead of 4.5, and the SVG was nearly twice the size.

Why compression turns into extra paths

JPEG and lossy WebP both throw information away in small square blocks. Inside a flat area of colour you rarely notice. Around a sharp edge, the compressor cannot represent the jump from one colour to another cleanly, so it leaves faint halos and blotches along the edge.

A tracer sees those halos as real colour. Unless something cleans them up first, each blotch becomes a tiny shape of its own, which is where the extra paths and the bigger file come from. Our tracer runs a cleanup pass on JPGs before tracing for exactly this reason. It keeps quality 80 close to the PNG, but it cannot recover detail that heavy compression already removed.

Which file to use

1. Use PNG or lossless WebP if you have it. It is always the best source, and there is no advantage in converting it to anything else first.
2. A JPG at quality 80 or higher is fine. Most photos and logos exported from design tools are in this range. The difference is real but small.
3. Avoid re-saved and messaging-app copies. Every re-save and every trip through a chat app compresses a JPG again. The first file the designer sent is worth hunting down.
4. Never convert a JPG to PNG to improve it. A PNG made from a JPG contains the same compression damage, stored losslessly in a bigger file. It will trace exactly like the JPG it came from.
5. A WebP saved from a website is usually lossy. It traces like a JPG of similar quality. If the artwork is yours, the original export will do better.

The short version

For tracing, the order is: lossless (PNG or WebP) first, then high-quality lossy, then heavily compressed anything. The format name matters much less than whether the file was compressed hard along the way.

The twelve reference logos, every encoding setting, and the scoring are in the measurement script in our repository, so all of the figures above can be reproduced.