JPEG vs PNG vs WebP
Three formats, three jobs. Picking wrongly costs you either quality or megabytes.
The short version: JPEG for photographs, PNG for screenshots and anything with transparency, WebP when you want the smallest file and modern browsers are the audience. The rest of this explains why, and which conversions quietly cost you something.
What each one is built for
JPEG
Lossy, designed in the early nineties for photographs, and understood by every device ever made. It works by discarding detail the eye is bad at noticing — which is exactly right for gradients, skin and sky, and exactly wrong for sharp edges. No transparency. Carries EXIF metadata, including GPS.
PNG
Lossless: what goes in comes out, pixel for pixel. Supports a full alpha channel, so transparency is properly graded rather than on/off. Compresses flat colour extremely well, which is why a screenshot is small as a PNG and awkward as a JPEG. Photographs, on the other hand, produce very large PNGs.
WebP
Both jobs in one format. It has a lossy mode that beats JPEG at the same visual quality, and a lossless mode that generally beats PNG, plus transparency in either. Typical saving is 25–35% against the equivalent JPEG or PNG. Every current browser displays it; older desktop applications and some printers still do not.
Side by side
| Compression | JPEG lossy · PNG lossless · WebP either |
|---|---|
| Transparency | JPEG no · PNG yes · WebP yes |
| Best for | JPEG photos · PNG flat colour and text · WebP both |
| Animation | JPEG no · PNG only as APNG · WebP yes |
| EXIF metadata | JPEG yes · PNG and WebP have their own chunks instead |
| Support | JPEG and PNG universal · WebP all current browsers |
Conversions that cost you
PNG → JPEG. Fine for a photograph that was saved as PNG by accident, and the saving is large. Bad for a screenshot: JPEG smears text and flat areas, and the file often ends up bigger than the PNG.
JPEG → PNG. Adds nothing back. Useful only as a stopping point before editing, so further saves do not compound the loss.
Anything → JPEG with transparency. There is no alpha channel to move the pixels into, so they become a flat colour. A careful converter fills white; a careless one leaves black, which is the classic ugly result. The converter here fills white deliberately.
Any lossy → any lossy. Every pass discards more. Convert from the original, not from a copy that has already been through the mill.
Choosing in practice
- Photograph for the web — WebP first choice, JPEG at 80% if you need universal support.
- Screenshot, diagram, logo — PNG, or lossless WebP for a smaller file.
- Anything with transparency — PNG or WebP. Never JPEG.
- Email attachment — JPEG. It opens everywhere without argument.
- Editing master — PNG or the original RAW. Never a re-saved JPEG.
- Print — whatever the printer asks for, at the original resolution.
What about AVIF?
AVIF compresses better again, often noticeably so at low file sizes, and browser support is now broad. It is slower to encode and support outside browsers remains patchy, so WebP is still the safer default for general use. Worth watching rather than ignoring.
Metadata travels differently
EXIF — camera, timestamps, GPS — is a JPEG convention. PNG and WebP have their own metadata containers, and converting between formats generally drops the lot. That is often welcome, but do not rely on it as a privacy measure: check with the EXIF viewer, or strip deliberately with Remove EXIF.
Related guides
- Reducing image file size — resize before you compress
- Removing EXIF data — what conversion does and does not clear
- Converting audio formats — the same decisions for sound
Summary
JPEG for photographs, PNG for flat colour and transparency, WebP when you want both jobs done smaller and the audience is on current browsers. Converting to JPEG always costs detail and always loses transparency; converting away from JPEG never gives anything back. Start from the original whenever you can.