A per this example(and the one following it) using the media attribute, the <img>src is the default image and displayed when no media queries match.
In your case though, media="(min-width: 1200px)" is going to capture any window greater than that width, and display the image that is 507px wide. The <img> is never displayed.
Changing the order (I have discovered) is key too (at least in Firefox.) So the media queries should go largest to smallest—1200, 786, 576. You might consider changing these to max-width instead of min-width.
In the HTML above, the <img> element’s src attribute is never used because the min-width: 1200px is the largest screen value (yes, I made the image square because it was easier than doing the 3:2 aspect ratio maths! )
Thanks for looking into this. I copied what you have the image size is not changing; it’s staying at 800 x 800. The image is in a flex column and that is also inside a class that has things like padding-right: 1rem. Though, there shouldn’t be any way that it’s affecting different images from not being served up. Just threw code in codepen to confirm. Any ideas?
Yes, it’s the Meditations.html page.
I was using a class to make the image responsive and that’s the code that’s up there now.
As I resize the window/viewport I see the image changes to the <source> specified for that viewport size.
Netlify doesn’t have any control over what is displayed in the browser—that is all down to the HTML/CSS/JS you are using. What Netlify LM does is allow you to have one image source which you can dynamically transform rather than having to generate multiple files with different transformations based on colour, size, etc. (as I did in my example above.)