Some website backends have multiple image formats available. Their frontend will tell the browser to load webp preferentially with code like this. Browsers that don't support webp will just fall back to jpeg or whatever.

The html looks something like this:

  <figure>
    <picture>

      <!-- Load webp if browser supports it -->
      <source media="(max-width: 500px)"
              data-srcset="image.webp"
              type="image/webp">
   
      <!-- Load jpg if browser doesn't support webp -->
      <source media="(max-width: 500px)"
              data-srcset="image.jpg"
              type="image/jpeg">

      <!-- Fallback to this -->
      <img src="image.jpg">

    </picture>
  </figure>

I process images on upload to be available in multiple sizes and formats. I serve webp first since the (normally) smaller size makes the page faster for users.