It's important to understand that the modern image formats, like WebP, are not yet widely supported across all devices and browsers. You can find here a full list of supported browsers and devices for the WebP format.
If your target audience falls within one of the unsupported browser/device categories, you should serve optimized fall-back images in the original JPEG/PNG format so that your users don't see a broken or badly designed page:
<!--Before:--> <img src="image.jpg" alt=""> <!--After:--> <picture> <source type="image/webp" srcset="image.webp"> <img src="image.jpg" alt=""> </picture>
The browser uses the first listed source that's in a format it supports. If the browser does not support any of the formats listed in the "source" tags, it falls back to loading the image specified by the "img" tag.