Wordpress Default Featured Image Always Returned

General
1

I am trying to improve the LCP load time on my wordpress website. The featured image is what is causing the issues, so my plan is to use:

<picture>
<source srcset=image.png" media="(min-width: 1280px)"> 
<source srcset=image2.png" media="(min-width: 768px)"> 
<source srcset=image3.png" media="(min-width: 412px"> 
</picture>

So the web browser will pick the correct size of image based on the device being used.

Wordpress by default has different image sizes I can use. So I want to pull in the different image sizes like so:

<?php if ( has_post_thumbnail($post->ID)) { ?>
            <div class="hero-flex-col">
            <?php 
            global $post;
            
            $mime_type = explode('/', $type);
            $type = '.'.$mime_type['1'];
            $img_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true ); 
            
            $image_id = get_post_thumbnail_id($post->ID);
            $img_full = wp_get_attachment_image_url( $image_id, 'full');
            $img_large = wp_get_attachment_image_url( $image_id, 'large' );
            $img_medium_large = wp_get_attachment_image_url( $image_id, 'medium_large' );
            $img_medium = wp_get_attachment_image_url( $image_id, 'medium');
            
            ?>
            
            <picture>
                <source srcset="<?php echo $img_large; ?>" media="(min-width: 1280px)">
                <source srcset="<?php echo $img_medium_large; ?>" media="(min-width: 768px)" type="image/<?php echo $mime_type['1']; ?>">
                <source srcset="<?php echo $img_medium; ?>" media="(min-width: 412px)" type="image/<?php echo $mime_type['1']; ?>">
                <source srcset="<?php echo $img_medium; ?>" media="(min-width: 360px)" type="image/<?php echo $mime_type['1']; ?>">
                <source srcset="<?php echo $img_medium; ?>" media="(min-width: 0px)" type="image/<?php echo $mime_type['1']; ?>">
                <img src="<?php echo $img_medium; ?>" fetchpriority="high" alt="<?php echo $img_alt; ?>" style="min-height: 180px;" width="640" height="360">
            </picture>
            </div>
            <?php } ?>

The issue I have is that wp_get_attachment_image_url only ever pulls the default image url. I have tried also to regenerate the thumbnails using the following plugin and it makes no difference:

I’ve been pulling my hair out for days on this one so would really appreciate someones help.