PNG vs JPG vs WebP: Which Format Should You Use? (With Real Measurements)

Choose the wrong image format and you pay for it twice: once in page-load time, and once in the upload limits of whatever form or platform you are pushing the file into. The good news is that the right choice is almost always obvious once you see what each format actually costs in kilobytes. So we measured it.

We took three of our own 1280×714 images — one with smooth continuous gradients, one with large flat colour areas and a transparent cut-out, and one with photographic-style detail — and encoded each of them nine ways: lossless PNG, palette PNG at 256 and 64 colours, JPEG at quality 90/80/60, WebP at the same three qualities, and AVIF at 60. Every number below is a real file size from that test, not a figure borrowed from a spec sheet.

The short answer

For photographs, screenshots of photos, and anything with gradients or soft shadows: use WebP at quality 80 if your destination accepts it, otherwise JPEG at quality 80. For logos, icons, diagrams and anything with transparency: use PNG, but reduce the palette first. For pure line art or text on a flat background, a palette PNG is often smaller than any lossy format at equal clarity.

What each format is actually doing

PNG is lossless. It never throws information away; it only finds cleverer ways to describe the exact pixels you gave it. That makes it perfect when a single wrong pixel would matter — a logo edge, a UI mock-up, a medical or legal scan — and hopeless when your image contains photographic noise, because noise is expensive to describe exactly.

JPEG is lossy and photographic. It works in 8×8 blocks and quietly discards the high-frequency detail your eye is bad at noticing. That is why it crushes photos so well and why it mangles sharp edges, small text and flat colour fields with ringing artefacts. JPEG also has no transparency at all: a transparent PNG saved as JPEG comes back with a solid background, usually white or black.

WebP is lossy or lossy-with-alpha, and it borrows techniques from video compression. It handles both photographic content and transparency, which is exactly the combination JPEG and PNG each fail at. Its one real weakness is ecosystem: older software and some government portals still expect JPG or PNG.

AVIF is newer still and often the smallest of the four at equal perceived quality. In our test it landed between WebP q60 and JPEG q60 depending on the image. Support is good in modern browsers but patchier in desktop software, which is why we do not recommend it as a universal exchange format yet.

How to choose in ten seconds

1. 1Does the image need transparency? If yes, PNG or WebP — never JPEG.
2. 2Is it mostly flat colour, lines or text (logo, diagram, screenshot of a UI)? Start with a palette PNG. If it is still too big, resize it; do not reach for JPEG.
3. 3Is it photographic, or does it contain gradients and shadows? Use WebP q80 where the destination accepts it, otherwise JPEG q80.
4. 4Is the destination a strict portal (visa forms, university uploads, job applications)? Check what it accepts first — many only take JPG or PNG — and see our guide on hitting an exact kilobyte target.

Quality is a dial, format is a decision

People argue about JPEG 70 versus 85 as if it were the important choice. It usually is not. Look at the table again: switching a photographic image from PNG to JPEG q90 saved 91% before we touched the quality dial at all. Moving from q90 to q60 saved a further 36% of an already-small file. Get the format right first; then tune quality only if you are chasing a hard size limit.

The other dial people forget is dimensions. Halving an image's width and height quarters its pixel count, and for lossy formats that roughly quarters the file too. If a photo will be displayed at 800 pixels wide, converting it beautifully at 4000 pixels wide is not quality — it is waste.

Common mistakes we see constantly

• Saving a logo as JPEG to make it small. You lose the transparency, gain coloured fringes around every edge, and the file often ends up larger than a palette PNG would have been.
• Re-saving a JPEG as JPEG repeatedly. Every lossy pass discards a little more; artefacts accumulate like a photocopied photocopy.
• Uploading a PNG screenshot of a photo. Screenshots of photographic content are the worst case for PNG — our gradient fixture came out at over a megabyte lossless and 73 KB as WebP q80.
• Assuming 'WebP is always smaller'. At q90 on the gradient image it was larger than JPEG q90. The win appears at the qualities people actually use.

Keep reading

• Images & formatsHEIC to JPG: Why iPhone Photos Break Everywhere Else, and the Clean Fix
• Images & formatsHow to Compress a Photo to Exactly 100 KB (for Forms, Visas and Job Portals)
• Images & formatsWhy Your PNG Won't Compress — and What Actually Makes It Smaller