JPG, PNG or WebP — which image format should you use?
A decision guide for the three formats you actually encounter, including when each one is the wrong choice.
Most format advice is a list of technical properties that leaves you no better able to choose. Here is the short version, then the reasoning.
The 20-second answer
- Photograph, going on a website? WebP.
- Photograph, going anywhere else? JPG.
- Screenshot, logo, diagram, or anything with transparency? PNG — or WebP if it is for the web.
- Something with text in it? Not JPG.
If that covers your case, you are done.
Why each format exists
JPG (1992)
Designed for photographs, and still excellent at them. It uses lossy compression tuned around how human vision works: we notice changes in brightness far more than changes in colour, so JPG keeps luminance detail and throws away colour detail.
What it is bad at: anything with hard edges. Text, line art, logos and screenshots develop visible fringing — those faint smudges around lettering — because sharp transitions are exactly what its compression is worst at preserving.
It has no transparency. Ever. If you convert a transparent PNG to JPG, the transparent areas become a solid colour.
PNG (1996)
Lossless, with full alpha transparency. What goes in comes out exactly.
What it is great at: screenshots, UI mockups, logos, diagrams, icons, anything with large areas of flat colour, and anything that will be edited repeatedly. Because it is lossless, a PNG can be opened, edited and re-saved indefinitely with no degradation. A JPG loses a little every single time.
What it is bad at: photographs. A photo as a PNG is typically three to five times larger than the same photo as a good-quality JPG, for no visible benefit.
WebP (2010)
The one that arrived to replace both, and largely has. It does lossy compression like JPG, lossless compression like PNG, and supports transparency in both modes.
At the same visual quality it is typically 25–35% smaller than JPG and often more than 50% smaller than PNG for flat-colour graphics. That is a genuinely large difference in page weight.
What it is bad at: nothing technical — its problem is purely social. Every current browser supports it, but plenty of desktop software, older CMS uploaders and some print workflows still do not. If a file is leaving your control and you do not know what will open it, WebP is a gamble.
The decision, properly
Is the image going on a web page you control? Use WebP. This is the case where it wins clearly and the compatibility concern does not apply.
Will someone download, email or open it in unknown software? Use JPG for photos, PNG for graphics. Compatibility beats file size when you cannot predict the destination.
Does it need transparency? PNG or WebP. JPG is out, with no workaround.
Does it contain text or sharp lines? PNG or lossless WebP. JPG will visibly degrade it, and no quality setting fixes that entirely.
Will you edit it again? PNG. Every lossy save compounds. Keep a lossless master, export lossy copies.
The generation-loss trap
This one costs people real quality without them noticing.
Every time a JPG is opened, modified and saved, it is decompressed and recompressed — and the recompression throws away a little more. Do it once and nothing is visible. Do it five times and the image is noticeably soft. Do it twenty times and it looks like a photocopy of a photocopy.
This is why "keep the original" is not just filing advice. Your working copy should be lossless. Export to JPG or WebP at the end, and if you need to change something, go back to the master rather than editing the export.
What about AVIF?
AVIF compresses better than WebP again — often 20% better — and browser support is now broad. It is a reasonable choice for a website where you can serve a fallback.
The catch is encoding speed, which is considerably slower, and tooling support outside browsers, which is still thin. WebP remains the pragmatic default; AVIF is worth it when bandwidth genuinely matters at scale.
A note on file extensions
.jpg and .jpeg are the same format. The three-letter version is a leftover from MS-DOS filename limits, and nothing has cared about the difference for decades. Use whichever your tools produce.