Keep in mind that Jpg doesn't support transparency.
webp does. Lossy and lossless.
There are claims that jpg is better at compression factor 90 and above and webp at compression 70 and below and inbetween there is little difference, but there seem to be differences based on the content of the image, so quality comparison is very hard and biased. Natural stuff seems to look better in jpg and straight lines better in webp.
So there might be situation where one would prefer jpg over lossy webp. But png is always loses by orders of magnitude, unless you need pixel accuracy. And even then, it typically loses against lossless webp.
and actually take up less space than a PNG still image with a smaller resolution
Which shows precisly the problem with a lossless image format. You can have an animation for the same space ;-)
Thank you for pointing out overlay technique. It has many benefits and also the welcome side effect of reducing size.