Como utilizar imagem Webp em sites. Isso é muito útil para otimização de sites

webp.html

<!-- OPÇÃO 1: Site Estático, de forma bem manual -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.png" alt="" title="">
</picture>
<!-- TERMINA AQUI -->

<!-- OPÇÃO2: Site estático, mas de forma automatia -->
<!-- no css (caso seja necessário) -->
<style>
  html.webp div{background-image: url(image.webp);}
  html div{background-image: url(image.jpg);}
</style>

<!-- no html -->
<img data-jpg="image.jpg" data-webp="image.webp" class="myimg" alt="" title="">

<!-- chamar os js -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function() {
    Modernizr.on('webp', function (result) {
      var img = $('.myimg');
      for (var i = 0; i < img.length; i++) { 
        if (result) {
          img[i].src = img[i].getAttribute('data-webp');
        }
        else {
          img[i].src = img[i].getAttribute('data-jpg');
        }
      }
    });
  });
</script>
<!-- TERMINA AQUI -->