How can we offer alternate images to the browser, in case it is not compatible with an image format (mime types)?

We can use the picture element and the source element, together with the type attribute todo so:

<picture>
  <source srcset="logo.webp" type="image/webp">
  <source srcset="logo.jxr" type="image/jxr">
  <img src="logo.jpg" alt="logo"> <!-- This is the fallback option, and the "placeholder" for the other sources. -->
</picture>