<picture style="--h:9;--w:16;">
  <source 
    media="(max-width: 767px) and (prefers-color-scheme: light)"
    srcset="
    https://assets.stoumann.dk/img/coffee-light-small.jpg?w=250 250w,
    https://assets.stoumann.dk/img/coffee-light-small.jpg?w=450 450w,
    https://assets.stoumann.dk/img/coffee-light-small.jpg?w=650 650w,
    https://assets.stoumann.dk/img/coffee-light-small.jpg?w=850 850w,
    https://assets.stoumann.dk/img/coffee-light-small.jpg?w=1050 1050w,
    https://assets.stoumann.dk/img/coffee-light-small.jpg?w=1250 1250w,
    https://assets.stoumann.dk/img/coffee-light-small.jpg?w=1450 1450w,
    https://assets.stoumann.dk/img/coffee-light-small.jpg?w=1650 1650w
    "
    sizes="
    (min-width: 768px) and (max-width: 1199px) 50vw,
    (min-width: 1200px) 33vw,
    100vw"
  >
  <source 
    media="(min-width: 768px) and (prefers-color-scheme: light)"
    srcset="
    https://assets.stoumann.dk/img/coffee-light-large.jpg?w=250 250w,
    https://assets.stoumann.dk/img/coffee-light-large.jpg?w=450 450w,
    https://assets.stoumann.dk/img/coffee-light-large.jpg?w=650 650w,
    https://assets.stoumann.dk/img/coffee-light-large.jpg?w=850 850w,
    https://assets.stoumann.dk/img/coffee-light-large.jpg?w=1050 1050w,
    https://assets.stoumann.dk/img/coffee-light-large.jpg?w=1250 1250w,
    https://assets.stoumann.dk/img/coffee-light-large.jpg?w=1450 1450w,
    https://assets.stoumann.dk/img/coffee-light-large.jpg?w=1650 1650w
    "
    sizes="
    (min-width: 768px) and (max-width: 1199px) 50vw,
    (min-width: 1200px) 33vw,
    100vw"
  >

  <source 
    media="(max-width: 767px) and (prefers-color-scheme: dark)"
    srcset="
    https://assets.stoumann.dk/img/coffee-dark-small.jpg?w=250 250w,
    https://assets.stoumann.dk/img/coffee-dark-small.jpg?w=450 450w,
    https://assets.stoumann.dk/img/coffee-dark-small.jpg?w=650 650w,
    https://assets.stoumann.dk/img/coffee-dark-small.jpg?w=850 850w,
    https://assets.stoumann.dk/img/coffee-dark-small.jpg?w=1050 1050w,
    https://assets.stoumann.dk/img/coffee-dark-small.jpg?w=1250 1250w,
    https://assets.stoumann.dk/img/coffee-dark-small.jpg?w=1450 1450w,
    https://assets.stoumann.dk/img/coffee-dark-small.jpg?w=1650 1650w
    "
    sizes="
    (min-width: 768px) and (max-width: 1199px) 50vw,
    (min-width: 1200px) 33vw,
    100vw"
  >

  <source 
    media="(min-width: 768px) and (prefers-color-scheme: dark)"
    srcset="
    https://assets.stoumann.dk/img/coffee-dark-large.jpg?w=250 250w,
    https://assets.stoumann.dk/img/coffee-dark-large.jpg?w=450 450w,
    https://assets.stoumann.dk/img/coffee-dark-large.jpg?w=650 650w,
    https://assets.stoumann.dk/img/coffee-dark-large.jpg?w=850 850w,
    https://assets.stoumann.dk/img/coffee-dark-large.jpg?w=1050 1050w,
    https://assets.stoumann.dk/img/coffee-dark-large.jpg?w=1250 1250w,
    https://assets.stoumann.dk/img/coffee-dark-large.jpg?w=1450 1450w,
    https://assets.stoumann.dk/img/coffee-dark-large.jpg?w=1650 1650w
    "
    sizes="
    (min-width: 768px) and (max-width: 1199px) 50vw,
    (min-width: 1200px) 33vw,
    100vw"
  >
  <img
    alt="A DARK cup of coffee"
    crossorigin="anonymous"
    decoding="async"
    id="img"
    loading="lazy"
    src="https://assets.stoumann.dk/img/coffee-light-small.jpg" />
</picture>
<code id="code"></code>
<p>Markup rendered with <a href="https://codepen.io/stoumann/pen/abpzVGW">Responsive Image Configurator</a>.<br />You have to <strong>resize</strong> the browser to see the image change.</p>

body {
  font-family: ui-sans-serif, system-ui, sans-serif;
  margin: 0;
  padding: 0.5rem;
}
code {
  background-color: black;
  color: lime;
  display: block;
  font-size: small;
  margin: 0.5rem 0;
  padding: 0.5rem;
  word-break: break-all;
}
img {
  max-width: 100%;
  width: 100%;
}
picture {
  display: block;
  position: relative;
}
picture::after {
  content: '';
  display: block;
  padding-bottom: calc((var(--h, 9) / var(--w, 16)) * 100%)
}
picture img {
  bottom: 0;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  img, picture {
    width: 50vw;
  }
}
@media only screen and (min-width: 1200px) {
  img, picture {
    width: 33vw;
  }
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #222;
  }
}

const L = window.matchMedia('(min-width: 1200px)');
const M = window.matchMedia('(min-width: 768px) and (max-width: 1199px)');
const RO = new ResizeObserver(() => {
  code.innerText = `DPR: ${window.devicePixelRatio}\nSRC: ${img.currentSrc}\nQRY:${M.matches ? ' 768px – 1199px: 50vw': L.matches ? ' +1200px: 33vw' : ' 0 – 767px: 100vw'}`;
});
RO.observe(img);