Website header blurry - designed in canva

[dean27]

Hi my header main image banner comes out blurry which i created on canva. Its high res on my computer but when uploaded even the text looks blurry. Im not sure if it has to do with the code i added as i was having an issue earlier before that. Resolution i using on canva is "3840x1400". Please let me know what to do please and thank you in advanced.

I'm using dawn theme and also added this code to use seperate images for desktop and mobile 
desktop: 
@media screen and (max-width: 750px) { .banner, slideshow-component { display: none; } }
mobile: @media screen and (min-width: 750px) { .banner, slideshow-component { display: none; } }

I

[Tommy001]

Hello, The blurry header image issue on your Shopify store, created in Canva at 3840x1400 resolution, could be due to Shopify's automatic image compression.

To fix this, try exporting the image from Canva in PNG format with high quality settings. Also, ensure the image dimensions match your header's exact requirements to avoid resizing issues.

I hope this will be helpful.

[dean27]

ive exported in png format and tried different dimensions which havnt changed anything