<picture>
  <source srcset="https://www.gstatic.com/webp/gallery/1.webp" type="image/webp">
  <source srcset="https://www.gstatic.com/webp/gallery/1.jpg" type="image/jpeg"> 
  <img src="https://www.gstatic.com/webp/gallery/1.jpg">
</picture>
<div>Quote source: <a href="https://developers.google.com/speed/webp/gallery1" target="_blank">WebP Gallery</a></div>

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-size: 0.85rem;
}

picture {
  margin: 0.5rem;
  text-align: center;
}

img {
  margin: auto;
  width: 75%;
}