JPG: photographs
JPG throws away detail your eye is unlikely to miss, which is why photos come out so small. At quality 80 most people cannot tell a JPG from the original, while the file is a fraction of the size.
What JPG is bad at is hard edges. Text, logos, screenshots and line art develop a grey fuzz around the edges, and that damage is permanent — re-saving a JPG never restores it.
PNG: graphics, screenshots and transparency
PNG keeps every pixel exactly as it was and supports transparency, so it is the right choice for logos, icons, diagrams and screenshots of text.
The trap is using PNG for photographs. The same picture can easily be five times bigger as a PNG than as a JPG with no visible benefit.
WebP: the modern default
WebP does both jobs. It compresses photos better than JPG at the same visible quality, and it handles transparency like PNG. Every current browser supports it.
The one place to be careful is files people will download and open in older desktop software, or send on to someone else. For those, JPG and PNG remain the safest currency.
The quick rule
Publishing on the web: use WebP. Photograph that someone will download: JPG at quality 80. Logo, screenshot or anything with transparency: PNG, or WebP if it stays on your site.
Whatever you pick, resize before you compress. A 4000-pixel-wide photo displayed in a 800-pixel column is wasting three quarters of its weight, and no amount of compression fixes that.