WebP, PNG or JPG: a decision guide with numbers
Choosing an image format comes down to two questions. Does the image contain photography or flat graphics? And does anything outside a web browser need to open it? Answer those and the format picks itself.
What each format actually is
- JPG is lossy compression tuned for photographs. It has no transparency. Thirty years of universal support.
- PNG is lossless. Pixels come out exactly as they went in, transparency included. The price is size: photographic PNGs are enormous.
- WebP does both jobs. Its lossy mode beats JPG by roughly 25 to 35 percent at the same quality, its lossless mode beats PNG by around 25 percent, and it supports transparency in both.
The numbers on a real photo
A 12 megapixel photo saved three ways: as a quality 80 JPG about 2.1 MB, as a quality 80 WebP about 1.4 MB, as a PNG about 18 MB. The two lossy versions are visually indistinguishable from each other. The PNG is identical to the source and nine times heavier than the JPG for no visible benefit.
Flat graphics reverse the story. A screenshot of a spreadsheet saved as JPG shows smudged halos around the text, while the PNG is crisp and often smaller, because lossless compression loves large areas of identical pixels.
So which one, concretely
- Photo going on a website: WebP at 80 percent quality. Every current browser renders it.
- Photo going anywhere else, email, documents, print shops: JPG. It never gets rejected.
- Screenshot, logo, chart, anything with text or sharp edges: PNG, or lossless WebP for the web.
- Needs a transparent background: PNG or WebP, never JPG.
- Archival master of an important image: PNG or the original camera file, because you can always derive lossy copies later.
What about AVIF
AVIF compresses even harder than WebP and browser support is now solid, but support outside browsers, in desktop apps, mail clients and older phones, remains inconsistent. It is a fine choice for a website you control end to end, and a premature one for files you hand to other people.