Mixed content when adding image on HTTPS site

The logo is not displayed on the site as I am getting mixed content errors in the Google Chrome console.

Mixed Content: The page at ‘https://site.com/’ was loaded over HTTPS, but requested an insecure image ‘https://site.com/wp-content/uploads/2020/04/logo-01-1536×1536.png’. This request has been blocked; the content must be served over HTTPS.

This is the offending HTML:

<div id="site-branding" class="site-branding"><a href="https://site.com/" class="custom-logo-link" rel="home"><img width="4167" height="4167" src="https://site.com/wp-content/uploads/2020/04/Logo-01.png" class="custom-logo" alt="lol" srcset="https://site.com/wp-content/uploads/2020/04/Logo-01.png 4167w, https://site.com/wp-content/uploads/2020/04/Logo-01-300x300.png 300w, https://site.com/wp-content/uploads/2020/04/Logo-01-1024x1024.png 1024w, https://site.com/wp-content/uploads/2020/04/Logo-01-150x150.png 150w, https://site.com/wp-content/uploads/2020/04/Logo-01-768x768.png 768w, https://site.com/wp-content/uploads/2020/04/Logo-01-1536x1536.png 1536w, https://site.com/wp-content/uploads/2020/04/Logo-01-2048x2048.png 2048w, https://site.com/wp-content/uploads/2020/04/Logo-01-75x75.png 75w" sizes="(max-width: 4167px) 100vw, 4167px"></a><div id="site-detail">				<h1 id="site-title"> 				<a href="https://site.com/" title="lol" rel="home"> lol </a>
</h1>  <!-- end .site-title -->
<div id="site-description"> description </div> <!-- end #site-description -->

</div></div>

I guess the fix would be to ensure the srcset= element respects the sites protocol, HTTP or HTTPS.

Thanks