Source tag not displaying image even though URL is correct

I'm trying to use WebP images and have PNG fallback in case the browser doesn't support WebP, and for this I am using the <picture> tag, however, things don't seem to be working as intended. Right now, the image which gets rendered is the PNG instead of WebP even though I'm using Google Chrome. If I'm understanding correctly, the PNG image should be the fallback in case all previous sources fail.

Both URLs are correct and point to the WebP and PNG version of the images

<picture>
    <source srcset="http://localhost:8080/img/01PZ047.webp">
    <img class='responsive-image' src="http://localhost:8080/img/01PZ047.png">
</picture>