Every comparison of image formats is a table of features, and reading one leaves you no better able to choose. The useful question is much smaller: does this image have hard edges and flat areas of colour, or is it a photograph?
Everything else follows from that, because the formats split along exactly that line.
What the two kinds of compression do
Lossy compression discards information that your eye is bad at noticing — mostly fine detail and subtle colour variation — and stores what is left very efficiently. It is superb on photographs, where the detail is noise-like and nobody knows what the true value of any individual pixel was supposed to be.
It is terrible on a screenshot. Text and interface edges are exactly the high-frequency detail that lossy compression throws away first, so letters grow a grey mist around them and flat backgrounds develop faint blotches.
Lossless compression stores every pixel exactly, and gets its savings from repetition. A flat blue area is stored as "blue, a lot of it". That works wonderfully on diagrams, logos and screenshots, and barely at all on a photograph, where no two adjacent pixels are the same and there is nothing to repeat.
The four
JPEG is lossy only. No transparency, no animation. It has been the right answer for photographs for thirty years and remains a perfectly reasonable one. Its weaknesses are the hard edges above, and generation loss — every re-save discards a little more, permanently.
PNG is lossless with proper transparency. It is the correct format for screenshots, logos, diagrams, and anything with text in it. It is the wrong format for a photograph, where it will produce a file several times the size of the JPEG for a difference nobody can see.
WebP does both modes. Lossy WebP is roughly 25–35% smaller than JPEG at matching quality; lossless WebP beats PNG on most images. It supports transparency in both modes — including transparency with lossy compression, which PNG cannot do and which is genuinely useful for product shots on a coloured background. Support is universal in anything currently maintained.
AVIF compresses harder still, sometimes dramatically, and handles gradients and dark scenes better than anything above. The costs are encoding time — it is slow, noticeably so on large images — and support that is good but not yet everywhere. Use it for images on a site you control, where you can serve a fallback. Do not use it for a file you are about to email to someone.
The two that are not really in the comparison
SVG is not a picture. It is a set of drawing instructions, so it is sharp at every size and its file size depends on how complicated the drawing is rather than how large it is displayed. For a logo, an icon or a chart it beats all four absolutely. For a photograph it is not an option at all.
GIF has one surviving use, which is that a great many places still accept it for short animations and accept nothing else. It is limited to 256 colours, has one-bit transparency that produces the notorious white fringe, and is larger than anything modern. If you have a choice, you do not want it.
The two mistakes that cost the most
A photograph saved as PNG. This is the most common one, usually because a screenshot tool defaults to PNG and the screenshot happened to be of a photograph. The file is three to eight times larger than it needs to be, with no visible benefit. If it is a photograph, it wants lossy compression.
A screenshot saved as JPEG. The mirror image, and it is worse, because the damage is visible and permanent. Text goes soft, edges ring, and the flat grey of an interface acquires faint stains. Re-saving it as PNG afterwards does not repair anything — the detail is gone.
Both are easy to fix before the fact and impossible to fix after, which is why they are worth knowing rather than looking up.
Converting between them
Going from lossless to lossy is fine. Going from lossy to lossless is pointless — you are storing the JPEG's artefacts perfectly, in a larger file. And going from lossy to lossy re-encodes, so a JPEG converted to WebP at high quality is a copy of a copy.
Where you have the original, convert from that. Converting in a browser has the useful property that you can produce two versions of the same source and compare the actual files before deciding, rather than trusting a rule of thumb about your particular image.
The short version
Photograph: WebP, or JPEG if it needs to work anywhere without thought. Screenshot, logo, diagram or anything containing text: PNG, or lossless WebP. Icon or logo you have the vector for: SVG. Site you control and can serve fallbacks from: AVIF for the photographs.
And whichever you pick, resize it to the size it will actually be shown at first. That saves more than the format choice does, almost every time.