Three formats, three jobs. The confusion comes from using the wrong one and then blaming the format.
I keep this decision down to two questions. Answer them and you're done.
Question one: is it a photo?
Photos have smooth gradients, millions of colors, no sharp lines. Portraits, landscapes, product shots, food. For these, the answer is JPG or WebP.
JPG when the file needs to work everywhere. Email attachments, downloads you hand to clients, uploads to systems you don't control. JPG has been readable by everything since the 90s.
WebP when it lives on a website you control. Smaller files, same look. This is the modern default for web photos.
Question two: does it have sharp edges or transparency?
Logos, icons, screenshots, text, illustrations. Anything with crisp lines. For these, JPG is wrong (it smears edges into mushy halos).
PNG for graphics with transparency or sharp detail. It's the boring, reliable answer and it works.
SVG for logos and icons, if you can. It's not a pixel format at all, it's shapes described as text. Infinitely sharp at any size, often under a kilobyte. But that's a different article.
The mistakes I see constantly
PNG photos on websites. A 3 MB PNG of a sunset that would be 200 KB as a WebP. This is the most common waste on the internet, and I see it on professional sites.
JPG logos. A logo saved as JPG always looks slightly dirty around the edges. Zoom in on any JPG logo and you'll see the smear. PNG or SVG fixes it instantly.
WebP attached to emails. Technically fine, practically annoying. Some email clients show it, some don't. JPG for anything that travels by email.
Practical tip: when in doubt, convert and compare. Make both versions, put them side by side at full size. Your eyes will tell you in three seconds which format the image wants to be.
Switching formats is the easy part
Jiggle X Wiggle's free converter moves images between all three formats in seconds. No account, no cost.
Two questions, three formats, zero confusion. Photos get JPG or WebP. Graphics get PNG. Done.