JPG, PNG or WebP: which one to use
Almost every case is settled by a single question: is this a photograph, or is it a graphic with flat colour and hard edges?
The rule
Photographs go in a lossy format. They are made of gradual tonal variation, which is exactly what lossy compression discards without anyone noticing, and the saving is enormous — often ten to one.
Graphics with flat areas and sharp edges — logos, screenshots, charts, anything containing text — go in a lossless format. Lossy compression puts visible halos around hard edges, and it makes small text look smeared in a way that no quality setting fully fixes.
JPG
The safe default for photographs. Every device, every browser, every upload form and every print shop on earth accepts it, and after thirty years that universality is worth more than a few percent of file size.
It cannot store transparency, and it degrades a little every time it is saved. That second point is the one that catches people out.
PNG
Lossless, with proper transparency. The right choice for logos, screenshots, diagrams and anything that will be edited again later, because repeated saves cost nothing.
Used for a photograph it produces a file five to ten times larger than the JPG for no visible gain, which is the single most common reason a page loads slowly.
WebP
Does both jobs — lossy and lossless, with transparency in either — and lands around 25 to 30 percent smaller than the equivalent JPG or PNG. Every current browser supports it.
Use it on the web. Be more careful sending it to people: some desktop software, some older phones and a fair number of upload forms still reject it, and "why won't this open" is a worse outcome than a slightly larger file.
And AVIF
Smaller again than WebP, particularly at low quality, with browser support that is now good and tooling support that is still patchy. Worth using for a site you control and its images; not worth using for a file you are handing to someone else.
The mistake that actually costs you
Every save to a lossy format re-encodes the image, and the damage accumulates. Open a JPG, crop it, save it, someone else resizes it, saves again, then it is converted to WebP and back — by the fourth or fifth round trip the edges are visibly mushy and no amount of care recovers them.
Keep one original, do your editing from that, and export to the format you need once. Converting between lossy formats is not free, even when the quality slider says 100.