0

This is what I have...

<picture>
    <source srcset="assets/images/home/desktop-hero.jpg" media="(min-width: 768px)" />
    <source srcset="assets/images/home/mobile-hero.jpg" media="(max-width: 767px)" />
    <img class="hero-image-main ratio-content" src="assets/images/home/mobile-hero.jpg" />
</picture>
daleyjem
  • 2,335
  • 1
  • 23
  • 34

1 Answers1

1

Assuming that the "mobile" image is a scaled-down version of the "desktop" image, and the widths of the images are 384 and 768 respectively, and you want the image to be 100vw wide up to 768px...

<img src="assets/images/home/mobile-hero.jpg"
     srcset="assets/images/home/mobile-hero.jpg 384w,
             assets/images/home/desktop-hero.jpg 768w"
     sizes="(min-width:768px) 768px, 100vw">

If your "mobile" image is a cropped version of the "desktop" image (art direction), then you should be using <picture>. (You can drop the second <source> though, the <img> is picked up as a candidate.)

zcorpan
  • 1,243
  • 6
  • 11