tldr…

Don’t use this:

<div class="image-wrapper">
  <img class="image--desktop"
    src="/image-desktop.jpg" 
    width="1200" height="400"
    alt="Super descriptive text">
  <img class="image--mobile" 
    src="/image-mobile.jpg" 
    width="600" height="800"
    alt="Super descriptive text">
</div>

and:

.image--desktop {
  display: none;
}
@media (min-width: 1200px) {
  .image--mobile {
    display: none;
  }
  .image--desktop {
    display: block;
  }
}

Instead of all that duplicate HTML and unnecessary CSS, all you need is this [HTML and no CSS or JavaSctipt]

<div class="image-wrapper">
  <picture>
    <source 
      src="/desktop-image.jpg" 
      width="1200" height="400"
      media="min-width: 1200px">
    <source
      src="/mobile-image.jpg" 
      width="600" height="800"
      media="max-width: 1199px">
    <img src alt="Super descriptive text">
  </picture>
</div>