PNG vs JPG vs WebP: Which Format to Use When
Short answer
Photographs → JPG. Screenshots, logos, diagrams and anything needing transparency → PNG. Anything on a website you control → WebP, which beats both by 25–35%. The choice follows the content, not the quality you want: JPG wrecks sharp edges and PNG makes photographs several times larger for no benefit.
On this page
The format argument is usually framed as a quality question, and that framing is why people keep choosing wrong. PNG is not the high-quality option and JPG is not the low-quality one. They compress in fundamentally different ways, and each way suits a different kind of picture.
Get the content right and the quality follows. Get it wrong and you either destroy a screenshot or carry a photograph at five times the size it needs.
The short version
| Content | Format | Why |
|---|---|---|
| Photograph | JPG | Lossy compression suits continuous tone |
| Screenshot, UI, text in an image | PNG | Sharp edges survive intact |
| Logo, icon, diagram, chart | PNG | Flat colour compresses extremely well |
| Anything needing transparency | PNG | JPG cannot store it |
| Images on a site you control | WebP | 25–35% smaller than either |
| Upload forms and attachments | JPG | Universally accepted |
If you read nothing else, that table is the guide.
Why the two compress differently
JPG discards information deliberately. It converts the image into frequency information and throws away the high-frequency detail your eye is least sensitive to, in 8×8 pixel blocks. On a photograph, where tone varies smoothly and no one can tell you exactly what shade a particular pixel should be, this works superbly. Files drop by an order of magnitude with no visible change.
On a hard edge — the boundary of a letter, the border of a button — it fails visibly. A sharp transition is high-frequency information by definition, so the very thing JPG discards is the thing that makes text readable. The result is the faint halo of grey smudging around black text on white that you have seen on badly saved screenshots.
PNG finds exact repetition. It looks for runs of identical pixels and repeated patterns and encodes them compactly, reconstructing the original perfectly. On a screenshot with large flat areas and a limited palette this is extremely effective.
On a photograph it finds almost nothing, because sensor noise and lighting gradients mean adjacent pixels differ slightly nearly everywhere. A PNG of a photo is typically three to eight times the size of the equivalent JPG with no visible advantage. This is the single most common mistake in image handling, and compressing an image without losing quality goes into why it is so persistent.
Where WebP fits
WebP is not a compromise between the two. It has both modes.
WebP lossless does PNG’s job and is typically about 25% smaller than an optimised PNG. Supports transparency. Use it for graphics.
WebP lossy does JPG’s job and is typically 25–35% smaller at equivalent visual quality. It can also do lossy with transparency, which neither of the others manages — useful for a photographic image with a soft-edged cutout.
The case for WebP on a website is straightforward: smaller files, same appearance, supported everywhere that matters. The case against it anywhere else is software compatibility. Browsers handle it universally; desktop applications, email clients and upload forms are patchier. A WebP sent as an email attachment has a reasonable chance of confusing the recipient.
The rule that follows: WebP for the web, JPG for everything you hand to another person.
The transparency question
Only PNG and WebP can store transparency. JPG cannot, at all, and has no mechanism for it.
What happens when you save a transparent image as JPG is that the transparent areas become white or, occasionally, black. There is no warning and no way back. This is the mechanism behind the grey box around a signature image that resizing a signature for an online form deals with.
Converting the other way does not help either. Our JPG to PNG converter produces a valid PNG, but the white background is now pixels in the image rather than absent transparency. No converter can recover information the JPG never stored.
Format choice for specific jobs
Photos for a website. WebP lossy at 80–85% quality, resized to the display dimensions first. Keep a JPG fallback only if your audience includes very old software.
Photos to email or upload. JPG at 85%. Nothing else is as reliably accepted.
Screenshots for documentation. PNG, always. JPG damages exactly the text people are reading the screenshot for. The size penalty is small because screenshots compress well — and why screenshots are bigger than photos covers the cases where they do not.
Logos and icons. PNG, or SVG if you have a vector version. SVG is the right answer where it is available, because it scales to any size with no file-size cost at all.
Photos you will edit again. Keep the original — the camera file, or a PNG or TIFF export. Never re-save a JPG repeatedly; every save re-encodes and the damage accumulates.
iPhone photos. HEIC compresses better than JPG and is rejected by a great deal of software. Converting to JPG before sharing is usually the path of least resistance, via our HEIC to JPG converter or the settings change in stopping the iPhone saving photos as HEIC.
What conversion can and cannot do
Converting a format never improves an image. It can only preserve what is there or discard more.
- JPG → PNG: lossless from this point on, several times larger, preserves the existing JPG artefacts. Useful only if you are about to edit it.
- PNG → JPG: much smaller, irreversible, damages text and edges. Correct for a PNG that contains a photograph, wrong for a screenshot.
- Either → WebP: smaller if the source was PNG; if the source was JPG, re-encoding lossily compounds the damage, so use lossless WebP or accept a small quality cost.
- Upscaling anything: adds pixels, not detail.
Our PNG to JPG converter and image compressor both run in your browser, so the files stay on your machine.
What to expect
Choosing by content rather than by perceived quality typically halves the total weight of a set of mixed images without anyone noticing a difference, mostly by moving photographs out of PNG.
The honest limit is that format choice is the second-biggest lever, not the first. Resizing beats it comfortably — file size scales with the square of the dimensions, so a 4000-pixel photo displayed at 1200 pixels is carrying about 91% more data than it needs regardless of which format it is in. Resize first, choose the format second, compress third.