PNG vs JPG vs WebP: which one should you use?
Most format advice online is a table of specifications that leaves you no better able to decide. The useful question is not “which format is best” — it is “what is in this particular image?”
Get that right and the choice makes itself.
The one distinction that matters
Every image format is either lossy or lossless.
Lossy formats (JPG, and WebP/AVIF in their default modes) achieve small files by permanently discarding information the eye is unlikely to miss. They are extremely good at this for photographs, where detail is continuous and slightly imprecise colour goes unnoticed. They are bad at sharp edges, where the discarded information shows up as visible fuzz.
Lossless formats (PNG, and WebP in lossless mode) reproduce the original exactly. They compress by finding repeated patterns, which works brilliantly on flat colour and terribly on photographic noise.
That is the whole decision. Photographs are continuous tone: use lossy. Graphics have flat areas and hard edges: use lossless.
Choose by content
Photographs → JPG (or WebP/AVIF for the web)
A photograph in PNG is typically five to ten times larger than the same photograph in JPG at a quality nobody can distinguish. There is essentially never a reason to publish a photo as PNG.
If the image is going on a website you control, WebP saves another 25–35% over JPG. If you are emailing it or uploading it to a form, stick with JPG.
Logos, icons and illustrations → PNG
Flat colour with hard edges is exactly what PNG’s compression is designed for, and exactly what JPG handles worst. Save a logo as JPG and you get faint grey smudging around every edge — the classic “JPEG artefacts” halo. PNG also gives you transparency, which logos almost always need.
For simple flat-colour logos, SVG is better still, because it scales to any size without loss. If you have an SVG and need a raster version at a specific resolution, convert it to PNG.
Screenshots → PNG
Screenshots are mostly flat interface colour and small text — the worst possible case for JPG. Text edges blur and become tiring to read. PNG keeps them crisp and, because of all that flat colour, often produces a smaller file than JPG would anyway.
The exception is a screenshot that is mostly a photograph, in which case treat it as a photograph.
Anything needing transparency → PNG or WebP
JPG has no alpha channel at all. This is not a quality question, it is a capability question: if part of your image needs to be see-through, JPG cannot do it. Converting a transparent PNG to JPG fills the transparent areas with a solid colour — white, in our converter — and there is no way around that.
WebP supports transparency and lossy compression, which is genuinely useful: a transparent product photo can be far smaller as a lossy WebP than as a PNG.
Quick reference
| Content | Best choice | Why |
|---|---|---|
| Photograph | JPG (WebP/AVIF on the web) | Lossy compression suits continuous tone |
| Logo, icon | SVG, else PNG | Sharp edges, transparency |
| Screenshot | PNG | Text and flat colour stay crisp |
| Photo needing transparency | WebP or PNG | Only these support alpha |
| Scanned document | JPG or PDF | Continuous tone; PDF for multi-page |
| Email attachment | JPG | Universal compatibility |
| Archive / master copy | Original format | Never re-encode your originals |
Common mistakes
Saving photos as PNG “for quality”. The quality difference at a sensible JPG setting is invisible; the size difference is enormous. This is the single most common cause of needlessly heavy web pages.
Saving screenshots as JPG. Text goes soft and the file often is not even smaller. There is no upside.
Converting PNG to JPG and expecting transparency to survive. It cannot. If you need the transparent background, your options are PNG or WebP.
Repeatedly re-saving JPGs. Every save re-compresses and degrades. Editing a JPG five times leaves visible damage even at high quality. Keep an original and export copies.
Converting JPG to PNG to “restore” quality. Detail already discarded by JPG compression is gone permanently. Converting to a lossless format afterwards preserves the damage in a much larger file. It prevents further loss, which is useful before heavy editing, but it recovers nothing.
About file size
Format choice sets the ceiling on how small an image can be, but two other things usually matter more:
- Dimensions. Serving a 4000-pixel-wide photo into a 600-pixel column wastes roughly 97% of the pixels. Resizing is almost always the bigger win.
- Quality setting. For JPG, quality 75–85 is the sweet spot for most photographs. Above 90 you are spending bytes on differences nobody can see; below 60 artefacts become visible.
If you have a specific size target to hit, our compression tool works backwards from the number, and there is a full walkthrough in how to compress an image to an exact size.
Summary
Ask what is in the image. Continuous tone — photographs — wants lossy compression: JPG everywhere, WebP or AVIF on the web. Hard edges and flat colour — logos, screenshots, anything with text — wants lossless: PNG, or SVG when it is vector artwork. Transparency rules out JPG entirely. Everything beyond that is fine-tuning.