Using responsive images with art direction - html

Question

Is it possible to use responsive images, for fetching an appropriately sized image, along with art direction for displaying a different image on mobile?
I haven't seen any docs with an example of this, but I also haven't seen any docs saying you can't.
This is the simplified code that I thought might work but doesn't (the original is messy Liquid/Shopify code)
<picture>
<source
media="(max-width: 989px)"
srcset="
image-one-300.jpg 300w,
image-one-800.jpg 800w,
image-one-1200.jpg 1200w,
image-one-1800.jpg 1800w,"
sizes="100vw"
src="image-one_1800.jpg"
>
<img
srcset="
image-two-300.jpg 300w,
image-two-800.jpg 800w,
image-two-1200.jpg 1200w,
image-two-1800.jpg 1800w,"
sizes="100vw"
src="image-two_1800.jpg"
>
</picture>

Answer 1

The way that I do separate images for mobile is to simply add some CSS and then split them out:
CSS:
.mobileOnly {display:none;}
.desktopOnly {display:block;}
#media only screen and (max-width: 600px) {
.mobileOnly {display:block}
.desktopOnly {display:none;}
}
Then in the HTML, you have classes that you can add to elements:
<img class="desktopOnly" src="..." />
<img class="mobileOnly" src="..." />
The great thing about this is that you can use it for anything, including specific divs, text and much more!