<picture>
  <source srcset="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/ZJ6ytgzvsh5CvWhdthsA.jpg" media="(min-width: 75em)" width="1200" height="500">
  <source srcset="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/qQ0QuF4k0kO8B72b8Vo8.jpg" media="(min-width: 50em)" width="800" height="400">
    <img
     src="https://storage.googleapis.com/web-dev-uploads/image/KT4TDYaWOHYfN59zz6Rc0X4k4MH3/fO7EJEn4hGVeN4UbBO3g.jpg"
     alt="Portrait of a happy-looking handsome dog with a ball in its mouth."
     width="400"
     height="400"
     loading="lazy"
     decoding="async"
    >
</picture>

img {
  max-inline-size: 100%;
  block-size: auto;
  inline-size: auto;
}

body {
  margin: 0;
}