Display image (ID) srcset… confused

Thanks in advance for anyone that can assist. I’ve tried contacting ACF support directly and using their forum, but can’t get a response… This is in regards to using the image ID to generate srcset images per the documentation here: https://www.advancedcustomfields.com/resources/image/#display-image-id

Maybe I’m not understanding this correctly, but I thought this was supposed to determine the size of the viewport window, and load only the largest image necessary for that viewport? I’ve got this code in place, but any page speed test I run says the incorrect image size is being used for mobile devices. When I view the source code, I see srcset code, but only for the one size I’ve used in the code. Do I need to manually expand upon this? What I was thinking would happen is that if I have 6 image sizes setup (thumbnail, small, medium, medium_large, large, full) it would load the correct size for the viewport from those sizes.

I’ve setup an example page for testing https://delanopaddydayparade.com/test/ and here are my testing steps:

1. Load page with browser sized for mobile.
2. Right click and open each image in a new tab.
3. “medium_large” image opens 768px wide version
4. “small” image opens 768px wide version, but only displays up to 300px wide on the actual test page.
5. “full” image opens 768px wide version.
6. Resize browser to desktop size and reload the page.
7. Right click and open each image in a new tab.
8. “medium_large” image opens the full 2048px wide version, but only displays up to 768px wide on the actual test page.
9. “small” image opens 768px wide version, but only displays up to 300px wide on the actual test page..
10. “full” image opens the full 2048px wide version.

Basically, no matter what I do, page speed yells about the images being the wrong size. I’ve also tested page speed with only one image at a time, and it’s still marked as improperly sized. So I’m at a loss as to how this is actually supposed to work and if I build my sites “mobile first”, what size should I even be using? Because if I use the smaller sizes, the aren’t big enough for mobile. And if I use the larger sizes, they are too bog for mobile. Hopefully someone that sees this can explain it like I’m five.

Code used is below. Each example switches out the size obviously.

<?php 
	        $image = get_field('sponsors_image');
	        $size = 'medium_large';
	        if( $image ) {
	              echo wp_get_attachment_image( $image, $size, '', array('class' => 'img-fluid border', 'loading' => 'lazy') );
        	} ?>

The page I need help with: [log in to see the link]