Pre-load Hero Header Image

I have unticked /ticked disable feature image in the element header - rebuilt Critical CSS in Rocket (just in case) - still the same outcome

I have added a temp link to my staging site, as I am sure its me being a dumb ass

Cool - prefer a staging site :)
See here - need to edit the Post Hero Editor

https://www.screencast.com/t/4iD3LyzyzJu

With that change we should see no Background Image on the Header Element.
So we then need to update the PHP Snippet tilted : Hero2 to this:

add_action( 'wp_head', function() {
    if( is_single() ) {
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        echo '<link rel="preload" media="(max-width: 768px)" as="image" href="'.$featured_img_url.'"/>';
        echo '<link rel="preload" media="(min-width: 769px)" as="image" href="'.$featured_img_url_full.'"/>';
        echo '<style>
        @media(max-width: 768px) {
            .page-hero { background-image: url('.$featured_img_url .');}
        }
        @media(min-width: 769px) {
            .page-hero { background-image: url('.$featured_img_url_full .');}
        }
        </style>';
    }		
});

Then if it all works as it should, the Header Element won't generate the CSS for the Featured Background Image. But the function and it will preload and use the correct size image for the two device sizes

Thank you looking and for explanation

I have made the two changes but still have the same double loading - for an added bonus, the full size image is now out of focus (framing wise - not center-center)

OK so i updated the snippet on the staging site to this:

add_action( 'wp_head', function() {
    if( is_single() ) {
        $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large');
        $featured_img_url_full = get_the_post_thumbnail_url(get_the_ID(),'full');
        echo '<link rel="preload" media="(max-width: 768px)" as="image" href="'.$featured_img_url.'"/>';
        echo '<link rel="preload" media="(min-width: 769px)" as="image" href="'.$featured_img_url_full.'"/>';
        echo '<style>
        .page-hero {
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
        }
        @media(max-width: 768px) {
            .page-hero { background-image: url('.$featured_img_url .');}
        }
        @media(min-width: 769px) {
            .page-hero { background-image: url('.$featured_img_url_full .');}
        }
        </style>';
    }		
},1000);

Which incorporates the background positioning CSS.
And the main issue was the priority - now set to 1000 so the preloads happen after the viewport meta is set.
After spam clearing the WP Rocket cache ( lol ) it seems to be working