PNG vs JPG vs WebP: Which Format Should You Actually Use?

There are three image formats that matter for almost everything you publish, and picking the wrong one is the difference between a 40 KB photo and a 3 MB one. It is also the single easiest thing to fix on a slow page.

Here is the honest comparison, including where the "right" answer is not obvious.

The three, in one line each

JPG - lossy, no transparency, small files. The format for photographs. PNG - lossless, transparency, big files. The format for graphics and screenshots. WebP - lossy or lossless, transparency, smaller than both. The format for the web.

That is the whole argument, and it explains most decisions. What follows is the detail that actually bites.

JPG: for photographs, and nothing else

A JPG (JPEG) is a lossy format. When it saves, it looks at the image and throws away detail the eye is bad at noticing - fine texture, subtle gradients, high-frequency noise - and replaces it with a mathematical approximation. That is why a JPG is small, and why it is called lossy: the pixels you get back are not the pixels you put in.

That makes JPG the right format for photographs and the wrong format for almost everything else.

A photograph has continuous tone and soft detail, which is exactly what the algorithm is good at throwing away. A logo, a chart, a screenshot of text has hard edges and flat areas - and a lossy codec smears exactly those. The result is ringing around the edges and blotchy gradients where there should be flat colour.

The rule of thumb is older than these three formats and still true: if it is a photo, use JPG; if it is anything else, do not.

One more JPG fact worth knowing: JPG has no transparency. The moment you need a background to disappear, JPG is out. That single limitation is why PNG took over the web and why WebP later took over from PNG.

PNG: for graphics, and understand what it costs

A PNG is lossless. It stores the exact pixels, compressed with a scheme that is reversible - decompress it and you get the original back, bit for bit. That is why it is the right format for a screenshot, an icon, a diagram, a logo and anything with text in it. The edges stay sharp and the flat areas stay flat.

And that exactness is what makes PNG files so big. A photograph of a sunset, stored losslessly, is enormous - the compression can only exploit repetition, and a photograph has very little of it. A PNG photo is routinely 5 to 10 times the size of the same photo as a JPG.

Which is exactly what people get wrong: they save a photograph as a PNG because it "looks better", and then wonder why the page is slow. It does look better - bit for bit identical to the source. It is also five times the size for a difference no one can see on a photograph.

PNG is the right format when the image has:

• Hard edges (a screenshot, a diagram, a logo)
• Flat areas of colour
• Text
• Transparency
• A need for exact colours (a brand colour, a design deliverable)

WebP: the one that wins on the web

WebP is a modern format and it beats the other two on the axes that matter.

It is smaller. At the same perceived quality, a WebP is typically 25 to 35% smaller than the equivalent JPG. It is also substantially smaller than a PNG, because it can be lossy - and it holds transparency while doing it.

It is lossy or lossless. That is the part people miss. WebP is not just "the lossy one". It has a genuinely lossless mode, so a logo or a diagram can go to WebP and stay pixel-perfect. It is a single format that covers both of PNG's use cases, which is why PNG is now mostly a legacy format and an interchange format.

Every current browser renders it. Chrome, Firefox, Safari, Edge and the mobile browsers all handle WebP, and they have done for years. For a site live since 2020, WebP is safe everywhere.

The exceptions are worth knowing:

• Email. A lot of mail clients still refuse to display WebP, and the image arrives as a broken icon. If the image is going into an email, send a JPG.
• Design software and print. Adobe apps and print workflows generally still want TIFF, PSD or PNG.
• Very old Safari on an old device. Far enough in the past not to matter.

A decision table that actually decides things

The rule about the source format

One habit that makes the whole decision easy: always keep the original.

Convert a PNG to WebP for the web, but keep the PNG. Convert a JPG to WebP, but keep the JPG. If you ever need a crop that only works at full resolution, or a print run, or a format an app insists on, the source is there.

Converting a JPG to PNG and then back is the same idea run backwards - and it does not restore anything. A JPG has already thrown the detail away; promoting it to PNG just stores the lossier version with a bigger file size.

The one thing to check before you switch

Look at the result at 100%. Conversion is not lossless, and the difference between a well-chosen WebP and a badly-chosen one is invisible in a thumbnail and obvious on a large screen.

If you are converting a photograph to WebP, keep the quality setting high and look at the result full size. WebP's perceptual model is good enough that you will usually not see any difference at all - and when you do, the setting is there to fix it.

A short checklist

• Photograph for the web? WebP. It is 25-35% smaller than JPG at the same look.
• Graphics, text or transparency? WebP too - it has a lossless mode, so PNG is no longer the only option.
• Email? JPG. Mail clients still block WebP.
• Print or handing a file to a designer? JPG or PNG, and keep the lossless original.
• Never save a photograph as a PNG. It is the single biggest size mistake on the web.
• Keep the original next to every converted file.
• Look at the result at full size before you publish it.
• Convert it yourself. The image converter and the WebP converter do it in your browser, so the file never leaves your device.