Banner size on DAWN theme

[Onlinetrap]

I am pretty frustrated as I am going to launch this brand today, but I am having trouble with the banners both mobile view and desktop banner images are of poor quality. I have tried anything you can imagine, all different ratios and sizes, but they still do not give me a good quality and look grainy. I have talked with Shopify support, but they could not help me and told me to head over to the Shopify community, so now I am here. Does anyone have a solution, please help. I am using Canva.

Another super odd thing I am experiencing is that I uploaded a mobile banner, and I was just going to change color, when I changed color and uploaded it again the letters came out in grainy quality. Its the exact same photo, file and size, I just edited the color, but it shows grainy. I just can't wrap my head around why this is happening...
Website: www.toiletbrush.no 

[Ayomide22]

I am sorry to hear about the trouble you're experiencing with your banners. Poor image quality can be frustrating, but there are a few steps you can take to improve the quality of your banners for both mobile and desktop views.

[Onlinetrap]

I appreciate your support a lot! Gives me a smile on my face 🙂

[suyash1]

@Onlinetrap - what are the dimensions of your original image?

[Onlinetrap]

Hello mate! I have tried every dimension you can imagine, but the ones you are seeing now are: 1500 x 1000 - this has given me the best quality thus far

[suyash1]

@Onlinetrap - I think your banner code degrading the file size and hence it is getting stretched

[Onlinetrap]

Ok, thanks a lot for checking! Do you mean the custom code I have added to make it appear as mobile size as well? This one:

I actually got this code from one of your answers on another post, so its cool to see you here in my post! The code did the job on what I needed it for at least!

.banner__media:first-child {
width: 100%;
}
.banner__media + .banner__media {
display: none;
}
@media screen and (max-width: 749px) {
.banner__media:first-child {
display: none;
}
.banner__media + .banner__media {
width: 100%;
display: block !important;
}
}
.banner__text {
font-size: 22px;
}
.button {
width: 0px;
height: 0px;
padding: 0px 0px;
font-size: 18px;
}

[suyash1]

@Onlinetrap - hello it is always nice to know that my code helped someone.

For current issue we need to check banner code in template as I believe it is downgrading the image size.

[Onlinetrap]

Thanks for the suggestion, I am not a coder, but you mean that the additional code I added has nothing to do with it, but a code within the theme, so I need to check the theme editor, and find the template.css? Or template map? And then look for the potential code that makes the banner dragged?

[suyash1]

@Onlinetrap - yes, please check the theme code

[Onlinetrap]

Ok, thanks a lot! Anything specific I should look for?

[suyash1]

@Onlinetrap - please check banner section file and check if you have something like banner media