<div class="wrapper">
  <!-- JPG -->
  <div>
    <img src="https://zenhub.zengenti.com/image-examples/tree-frog.jpg?width=500&quality=80" alt="A green tree frog" />
    <p>jpg 15.9KB</p>
  </div>
  <!-- WebP -->
  <div>
    <img src="https://zenhub.zengenti.com/image-examples/tree-frog.jpg?width=500&format=webp&quality=80" alt="A green tree frog" />
    <p>webp 7.3KB</p>
  </div>
</div>

img {
  display: block;
  margin-bottom: 8px;
  width:100%;
}

.wrapper {
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.