JSFiddle - React, Tailwind, and code Playground

HTML

<figure>
  <img
     src="https://placehold.co/300x150"
     alt=""
     sizes="auto, (max-width: 300px) 100vw, 300px"
     loading="lazy"
     srcset="https://placehold.co/150x75 150w, https://placehold.co/300x150 300w, https://placehold.co/500x250 500w, https://placehold.co/1024x512 1024w"
     heigth="150"
     width="300"
  >
</figure>

<figure>
  <img
     src="https://placehold.co/300x150"
     alt=""
     sizes="(max-width: 300px) 100vw, 300px"
     loading="lazy"
     srcset="https://placehold.co/150x75 150w, https://placehold.co/300x150 300w, https://placehold.co/500x250 500w, https://placehold.co/1024x512 1024w"
     heigth="150"
     width="300"
  >
</figure>

<style>
img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain-intrinsic-size: 3000px 1500px;
}
figure {
  display: block;
  width: 200px;
}
img {
  object-fit: cover;
}
</style>