PNG vs JPG vs WebP: which should you use?
Use WebP for almost everything on the web — it is 60–80% smaller than PNG, supports transparency, and every current browser reads it. Use PNG for logos, screenshots, line art and anything needing lossless edges or guaranteed compatibility. Use JPG only for photographs where WebP is not an option.
The short version
PNG is lossless and supports transparency. It never degrades, which makes it the right working format, and the wrong delivery format for photographs.
JPG is lossy and has no transparency. It is small for photographs and terrible for text and sharp edges, where it produces visible smearing around contrast boundaries.
WebP does both: lossy or lossless, with a full alpha channel. At equivalent perceived quality it is meaningfully smaller than either, which is why it has become the default for web delivery.
Transparency
PNG and WebP both store an alpha channel, so a logo sits cleanly on any background. JPG cannot — converting a transparent image to JPG forces every transparent pixel to a solid colour, usually white.
If a transparent image appears with a black background somewhere, that is usually an older viewer failing to render alpha rather than a problem with the file. Flattening it onto an explicit colour before sending avoids the question entirely.
Does WebP affect SEO?
Positively, in practice. Image weight is a large contributor to Largest Contentful Paint, which Google uses as a ranking signal, so a lighter page tends to score better. There is no penalty for the format itself.
A rule you can apply without thinking
Photograph on a web page: WebP. Logo, icon or screenshot on a web page: WebP, or PNG if you need certainty. Anything being sent to a person or another system: PNG for graphics, JPG for photos. Anything you will edit again: PNG, always, so repeated saves do not compound compression loss.