Guide
WebP vs JPEG vs PNG: It Depends on the Picture
There is no best format, only a best format for the picture in front of you — and the gap between a right and a wrong choice here is not ten per cent, it is several times over. These are measurements taken in the browser's own encoders, which is what this site's converter uses, so the numbers are the ones you would get.
Photographs: WebP, by about a third
Compared at matched picture quality rather than matched quality number, WebP came out 30% smaller than JPEG on average across a set of photographs — with a spread from 23% to 47%, which is wide enough that the average is not much use for deciding about any one image.
The phrase "matched picture quality" is doing the work there. Quality 80 in one encoder is not quality 80 in another: on one of the test photographs, JPEG needed quality 57 to reach a given quality score and WebP needed 74 to reach the same one. Comparing the two at the same number, which is what most comparisons do, measures nothing.
PNG on a photograph ran between 7 and 20 times the size of the JPEG. It is not a contender here, for the same reason lossless compression has nothing to grip on in a photograph — grain does not repeat.
Screenshots and text
A dashboard screenshot, 800 by 520 pixels, saved from the same canvas in each format. "Pixels changed" counts how many came back different from the original; "worst error" is how far the furthest one moved, on a 0–255 scale.
| Encoder | Sizebytes | vs PNG | Pixels changed | Worst error0–255 |
|---|---|---|---|---|
| PNG | 48,412 | 1.00x | 0 | 0 |
| JPEG 85 | 41,630 | 0.86x | 95,565 | 26.8 |
| JPEG 95 | 57,435 | 1.19x | 69,416 | 9.3 |
| WebP 85 | 20,060 | 0.41x | 383,537 | 18.4 |
| WebP 90 | 23,138 | 0.48x | 373,255 | 10.2 |
| WebP 95 | 29,054 | 0.60x | 355,508 | 6.4 |
| WebP 100 | 17,798 | 0.37x | 0 | 0 |
JPEG is wrong twice over
Two rows are worth stopping on. JPEG at 95 produced a larger file than the lossless PNG and still damaged 69,416 pixels. And WebP at 100 is the smallest file in the whole test as well as the only one besides PNG that changed nothing at all.
So JPEG at 85 saves 14% against PNG and mangles the text to do it, and JPEG at 95 costs 19% more than PNG while still damaging it. There is no setting at which JPEG is the right answer for a picture with text in it — worth saying plainly, because it is the default a great many people reach for.
The last notch on the slider is a different encoder
This is the part that is genuinely surprising, and it is the reason this guide exists.
A quality slider looks like a smooth trade: higher number, better picture, bigger file. For WebP in a browser, that holds all the way up and then stops. At exactly 100, the encoder switches to lossless — and the file it produces is not the biggest one on the scale.
On that same screenshot: quality 90 gave 23,138 bytes, quality 95 gave 29,054, and quality 100 gave 17,798. The top of the slider produced a file 39% smaller than the notch below it, and the picture came back byte for byte identical. Every value below 100 changed more than 350,000 pixels.
On a photograph the same setting is a trap in the other direction. On a gradient-filled icon, quality 85 gave 10,536 bytes and quality 100 gave 116,120 — eleven times larger for a difference nobody can see. Lossless compression has nothing to grip on a smooth gradient or on photographic grain.
The rule that falls out of this is simple and has nothing to do with format names: if the picture is made of flat areas and hard edges, use 100 and get a perfect image for less than the lossy settings cost. If it is made of gradients or grain, stay in the 80s and never touch the top.
Transparency, where the answer flips again
JPEG has no alpha channel. Convert a logo with a transparent background to JPEG and the transparency does not degrade, it is gone — filled in, usually with white. That was checked rather than assumed: every pixel came back fully opaque.
Between PNG and WebP, which wins depends on the same flat-versus-smooth split as the slider. A flat logo — solid colours, hard edges — came out at 21,479 bytes as PNG and 11,066 as lossless WebP: half the size, pixel for pixel the same image.
An icon of the same dimensions filled with gradients came out at 178,268 bytes as PNG and 10,536 as WebP quality 85 — a 94% saving, and at that quality on a gradient there is nothing to see. The lossless setting on that same icon gave 116,120 bytes, so the choice within WebP mattered more than the choice between WebP and PNG.
What to actually do
Photograph for a website: WebP, quality 80 to 90. Expect roughly a third off the JPEG.
Screenshot, diagram, or anything containing text: WebP at 100. Smallest file in the test and a perfect copy.
Logo with transparency: WebP at 100 if it is flat colour, WebP in the 80s if it has gradients. PNG if something downstream will not accept WebP.
Photograph that has to open anywhere at all, including old software: JPEG. This is the only remaining reason to pick it.
Never: JPEG for anything with text, and PNG for a photograph.
Common questions
Is WebP safe to use now?
Yes. Every current browser reads it, and has for years — Safari added it in 2020, which was the last holdout. The practical exceptions are not browsers but other software: older desktop applications, some print workflows, and the occasional upload form that checks the file extension. If a file is going to a person rather than a web page, that is the case for JPEG or PNG.
Should I convert my existing JPEGs to WebP?
Only if they are going on a web page, and understand what you get. Converting a JPEG to WebP does not recover anything the JPEG threw away — it re-encodes what is left, losing a little more, and the saving is smaller than the 30% figure because you are compressing an already-compressed picture. Convert from the best original you have, not from the JPEG.
Image Converter →What about AVIF?
It compresses better than WebP again, typically by a further 20% or so on photographs, and browser support is now broad. It is not offered here because a browser canvas cannot encode it — the tools on this site run entirely in your browser, and that is the limit that decides it. If you have a build pipeline, AVIF is worth having.
Why is my WebP bigger than the PNG I started with?
Almost certainly a flat graphic saved at a lossy quality. On flat colour with hard edges, lossy WebP in the 80s and 90s can land close to or above a well-compressed PNG, because PNG is very good at exactly that kind of picture. Move the quality to 100, which switches WebP to lossless, and it should drop well below the PNG.
Image Converter →Does converting an image upload it anywhere?
Not here. The conversion runs in your browser and the file never leaves your device — which is also why these measurements are the ones you get, since your browser is doing the same encoding that was measured.