Is WebP supported?

Indeed the best way to implement correctly web is by using the picture syntax because some navigators don’t support webp. Just replacing jpg or png with webp in an image tag won’t work on some browsers and that’s not a good idea.

A friend of mine did use javascript to detect if webp was supported by the navigator or not. By default webp images were displayed, if not, he would use a data attribute with the jpeg or png file and replace the src by the content of this data field in javascript. It’s kinda complicated but still works and avoid the use of picture tag. Something like this :

//some test to see if webp is unsupported
    if(notsupported) {
        $("img").each(function () {
            var filename=$(this).data("file");
            $(this).attr("src",filename)
        });
    }

The issue is that you need to have js enabled to see the image. You have to display webp before another format to be seo (especially google bot) friendly…

Picture tag is still the best solution allowing to manage different resolutions but still needs to generate multiple pictures.

If your priority is not to generated too many pictures, then you should avoid webp. Once again this takes some time to generate so it has to be optional.