Use JPG for photographs
JPG throws away detail your eye is unlikely to miss, which makes photos dramatically smaller. A holiday photo saved as JPG might be 400 KB; the same image as PNG could be 4 MB. For anything with gradients, skin tones or natural scenery, JPG is the right answer.
Use PNG for graphics and transparency
PNG keeps every pixel exactly as it was. That matters for logos, screenshots, diagrams and anything with sharp edges or text, where JPG compression creates visible smudging. PNG is also the only one of the two that supports transparent backgrounds.
WEBP: smaller than both
WEBP typically produces files 25–35% smaller than JPG at the same visual quality, and it supports transparency like PNG. Every modern browser reads it. The only reason not to use it on a website is if you need compatibility with very old software.
A quick rule
Photo going to a website: WEBP. Photo going anywhere else: JPG. Logo, screenshot or anything needing a transparent background: PNG.