JPG vs PNG vs WebP: which format should you use?
What actually separates JPG, PNG and WebP — lossy versus lossless, transparency, file size — and a short rule for picking one without thinking about it every time.
By Wajahat Rasoul ·
The short answer
Almost every decision between these three comes down to two questions: does the image have large areas of flat colour or sharp edges, and does any part of it need to be transparent?
- Photograph, no transparency — JPG for maximum compatibility, WebP if you control where it will be opened.
- Logo, icon, screenshot, anything with flat colour or crisp text — PNG, or WebP if the destination accepts it.
- Anything on a website you own — WebP, with a JPG or PNG fallback if you support very old software.
The rest of this guide is why those answers are what they are, which matters as soon as you hit a case that does not fit the rule.
Lossy and lossless, and why it matters
A lossless format stores enough information to rebuild the original pixel for pixel. PNG is lossless. A lossy format throws away detail it judges you will not notice, and cannot get it back. JPG is lossy. WebP is unusual in offering both modes.
Lossy compression works brilliantly on photographs, because a photograph is full of noise and gradual transitions where a small error is invisible. It works badly on flat colour and hard edges, where the same error shows up as a visible halo — the smudgy fringe you see around text in a JPG screenshot.
That single property explains most of the format advice you will ever read. It also explains why the saving is so uneven: a 12 MP photograph might go from 30 MB uncompressed to under 3 MB as a JPG, while a flat logo saved as a JPG can end up larger than the PNG, and worse looking.
The three formats side by side
| JPG | PNG | WebP | |
|---|---|---|---|
| Compression | Lossy only | Lossless only | Lossy or lossless |
| Transparency | No | Yes, full alpha | Yes, full alpha |
| Animation | No | No (APNG aside) | Yes |
| Best at | Photographs | Flat colour, text, screenshots | Both, at smaller sizes |
| Support | Universal, everywhere | Universal, everywhere | All current browsers; patchy in older desktop software |
The support row is the one that catches people out. Every browser released in the last several years reads WebP, including Safari. It is desktop applications, print workflows and upload portals that are still inconsistent — which is why converting WebP back to JPG is a real need rather than a step backwards.
When JPG is right
Use JPG when the image is photographic and it has to open anywhere with no thought at all — a submission to a portal that lists accepted formats, a file emailed to a client, anything going into software you did not choose.
Quality settings in the 75–85 band are the useful range for delivery. Above about 90 the file grows quickly for differences you cannot see; below about 60, flat areas such as skies and studio backdrops start showing blocky banding.
JPG has no transparency at all. If you convert a transparent PNG to JPG the transparent pixels have to become something, and that something is usually white — which is why a logo exported to JPG arrives with a white box around it.
When PNG is right
Use PNG when edges must stay crisp or when part of the image must be transparent: logos, icons, UI exports, diagrams, screenshots with text, product cut-outs.
PNG being lossless does not mean PNG files have to be huge. The main lever is the number of distinct colours. A PNG restricted to a few hundred colours compresses far better than one carrying millions, and for a logo or an interface export the difference is usually invisible — that is exactly what the PNG compressor does.
When WebP is right
Use WebP anywhere you control what opens the file — your own website, your own app, images you are shipping rather than handing over.
Lossy WebP typically lands meaningfully smaller than a JPG of matching visual quality; on the images we see most often that is roughly a quarter to a third off, and images with large flat regions do better still. Lossless WebP does the same job for PNG-type images, and keeps the alpha channel while doing it.
The practical routes are JPG to WebP for photographs and PNG to WebP for graphics; the format converter handles a mixed folder in one pass. All of them run in your browser, so the files never leave your machine.
Three mistakes that cost real quality
Re-saving a JPG over and over
Every save re-applies lossy compression to an image that has already lost detail. Edit from the original whenever you can, and treat exported JPGs as final output rather than working files.
Converting a JPG to PNG to “improve” it
PNG is lossless, so it faithfully preserves the JPG artefacts that are already there — at several times the file size. Lossless does not mean restorative.
Shipping a 4000px image into a 800px slot
Format choice cannot rescue an image that is five times larger than it is displayed. Resize first, then pick a format, then compress — in that order. The reasoning is in optimising images for websites.