my client wanted to convert all images into webp, so I had to use the picture tag to do so, but the final result is a picture tag with 0x0(checked in the google inspector), not sure if that is correct, I do see the picture being served (not sure if it is the webp or png because in the inspector they both load up)
<picture class="mx-auto absolute z-10 -mt-28 left-1/2 -ml-14">
<source type="image/webp" srcset="http://localhost/images/pirate-footer.webp">
<source type="image/png" srcset="http:///localhost/images/pirate-footer.png">
<img id="pirate-img-footer" class="mx-auto absolute z-10 -mt-28 left-1/2 -ml-14" src="http://localhost/images/pirate-footer.png" alt="" loading="lazy">
</picture>
Also not sure if I should load the class styles also in the picture tag and only in the img tag, this example breaks the positioning of the image because there is two position fixed