Three formats cover almost everything on the web, and choosing between them is simpler than the amount written about it suggests. Here is the short version, followed by the two mistakes that account for most oversized images.
The one-line answers
JPEG for photographs going anywhere unpredictable — email, print, older software. Lossy, no transparency, universally supported by everything ever made.
PNG for screenshots, logos, diagrams, and anything needing transparency. Lossless, so every save is pixel-identical. Bad for photographs.
WebP for anything on a website. Roughly 25–35% smaller than the equivalent JPEG or PNG at matched quality, supports transparency, and every current browser handles it.
If the destination is a web page you control, the answer is WebP nearly every time. If you are sending a file to a person, JPEG remains the safest thing to attach.
Mistake one: PNG for photographs
This is the big one. PNG is lossless, which sounds like it should mean “better”, and for a screenshot it does. For a photograph it means the encoder has to store camera noise exactly — and noise is precisely the kind of data that does not compress.
A photograph saved as PNG is routinely five to ten times larger than the same image as a quality-85 JPEG, with no visible difference. If a page is slow and the images are PNGs, that is usually the entire problem.
The reverse is also true: a screenshot of text saved as JPEG looks worse and is often larger, because JPEG’s compression produces halos around the sharp edges of glyphs. Match the format to the content — continuous tone to JPEG or WebP, flat colour and hard edges to PNG or WebP.
You can convert between all three without uploading anything.
Mistake two: quality 100
Saving at quality 100 does not give you a perfect image. It gives you a JPEG spending enormous effort encoding detail your eye cannot resolve.
The scale is not linear. Going from 100 to 90 typically halves the file with no perceptible change. 80 is the standard choice for web photography and what most sites should ship. Between 60 and 70 you start to notice softness in fine texture. Below 50, flat areas like skies show visible blocking.
If you are unsure, use 80 and compare. Most people cannot pick the 80 from the 100 in a blind test, and the 80 is less than half the size. Try it here.
The thing that beats format choice entirely
Resizing. A 4000-pixel photograph displayed in an 800-pixel column carries twenty-five times more pixels than it can possibly show. No amount of format tuning recovers that.
Resize to roughly the largest size it will actually be displayed at, then compress. In that order. A 1600-pixel WebP at quality 80 will be dramatically smaller than a 4000-pixel one at quality 60, and it will look better. Resize first.
What converting cannot do
Converting a JPEG to PNG does not restore lost detail. The information was discarded when the JPEG was created; PNG simply stores the already-degraded pixels losslessly, at a much larger size. Converting to a lossless format never improves an image — it only stops further loss from that point on.
Similarly, converting a transparent PNG to JPEG flattens transparency onto a background, because JPEG has no alpha channel. If transparency matters, WebP gives you both alpha and small files.