Cacher is the code snippet organizer for pro developers

<picture 
    class="fixed-ratio" 
    style="padding-bottom:41%;">
  
    <!-- Image mobile -->
    <source media="(max-width: 767px)" srcset="image-mobile.png 1x, image-mobile-2.png 2x">

    <!-- Image desktop -->
    <source media="(min-width: 768px)" srcset="image-desktop.png 1x, image-desktop-2.png 2x">
    
    <!-- Fallback -->
    <img alt="A good description of the image"
          src="image-desktop.png"
          class="fixed-ratio-content">
</picture>

.fixed-ratio {
    display: block;
    position: relative;
    height: 0;
    overflow: hidden;
}

.fixed-ratio-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: inherit;
}