WebP, JPEG or PNG: which should you use?
· 7 min read
Most of the time this is decided by one question: does the image need transparency, and is it a photograph or a graphic? Everything else is refinement. Getting it wrong is what produces a 2 MB logo or a blurry screenshot.
What each format is for
| Format | Best at | Transparency | Weakness |
|---|---|---|---|
| JPEG | Photographs | No | Visible artefacts on sharp edges and text |
| PNG | Graphics, screenshots, logos | Yes | Very large files for photographs |
| WebP | Both, at smaller sizes | Yes | Older software may not open it |
Why a screenshot should not be a JPEG
JPEG compresses by discarding detail the eye is unlikely to miss in a photograph. Sharp edges are exactly what it handles worst, and a screenshot is almost entirely sharp edges: text, window borders, UI lines. The result is the smeared halo you see around letters in a JPEG screenshot, and it does not go away at higher quality settings, it only gets less obvious while the file grows.
PNG compresses losslessly and does well on large areas of flat colour, which is what a screenshot mostly is. A PNG screenshot is usually both smaller and sharper than the JPEG equivalent.
Why a photograph should not be a PNG
The same logic in reverse. A photograph has almost no flat areas and almost no repetition, so lossless compression has very little to work with. A PNG of a camera photograph is routinely five to ten times the size of a JPEG that most people cannot tell apart from the original.
Where WebP fits
WebP does both jobs and is usually meaningfully smaller than the equivalent JPEG or PNG at comparable quality. It supports transparency, which JPEG does not, and it has a lossy mode, which PNG does not. For images on a website it is the sensible default.
The reason not to use it is reach. Every current browser handles WebP, but plenty of desktop software, older operating systems and third-party upload forms still do not. If the file is going to be emailed to someone, attached to a form, or opened in an unknown application, a JPEG or PNG will cause fewer problems.
A practical split: WebP for anything you control the display of, such as your own site. JPEG or PNG for anything that leaves your hands and will be opened by software you cannot predict.
Quality settings are not comparable
A quality of 80 in one encoder does not mean the same as 80 in another, and it does not mean the same across formats. Treat the number as a dial to adjust while looking at the result, not as a value to copy between tools.
A short decision list
- Photograph on your own website: WebP, falling back to JPEG if you need maximum compatibility.
- Photograph going to someone else: JPEG.
- Screenshot, logo, diagram or anything with text: PNG, or WebP if it stays on your site.
- Anything needing transparency: PNG or WebP, never JPEG.
- Archival original you may re-edit: keep the original file, and treat every export as disposable.
Converting a folder between these formats is a batch job rather than a per-file one. The converter here processes the files in your browser, so a folder of client photographs is never uploaded anywhere.
How to batch convert image files without uploading them: convert a whole folder to WebP, JPG or PNG in one pass.
How to batch compress images and see what each file saved: Light, Balanced and Strong levels, JPG or WebP, with the saving shown per file.
Frequently asked questions
Is WebP always smaller?
Usually, at comparable quality, but not always. Very small images and some flat graphics can come out similar or slightly larger, so it is worth comparing on your own files rather than assuming.
Can I convert a JPEG to PNG to improve it?
No. The detail JPEG discarded is gone, and PNG will faithfully preserve the artefacts at a much larger size. Convert from the original if you still have it.
Does converting to WebP lose quality?
It depends on the mode. Lossy WebP discards detail like JPEG does; lossless WebP does not. Converting an already-lossy JPEG to lossy WebP compounds the loss, so use a higher quality setting than you think you need.