Photon images ugly stretch in to fit header banner container

-WP 5.0.2
-Jetpack 6.8.1 (yes: Speed up image load times, no: lazy images)
-Bootstrap 4.1.3
Chrome 71.0

As you move between site pages (only 3) the header banner (same on all pages: fish image) loads pixelated then the header image shrinks to fit it’s header container. Unwanted and unsightly fadein effect. Any ideas on getting the image to display when fully loaded and not pixelated?

The issue does not occur consistently.

Here is the relevant HTML….

<?php $images = rwmb_meta( 'dwp_banner_image', array( 'limit' => 1 ) );
	  $image = reset( $images );
	  $img_url = $image['url'];
	 ?>
	 
<div class="container">
    <div class="homepage-banner">
	<div class="card mb-4">
	    <img class="card-img" src="<?php echo $img_url ?>" alt="Card image">
		<div class="card-img-overlay  justify-content-end d-flex align-items-start flex-column">
             <h2 class="card-title"><?php echo rwmb_meta('dwp_banner-text', 'type=text') ?></h2>
		</div> <!-- card-img-overlay -->
					
	    </div> <!-- card -->
   </div> <!-- homepage-banner -->
</div> <!-- container -->

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