How can I improve the quality of my website's banner image?

[Fabianoo]

Hi all,

I need help for improving my banner image on my website. They are not in the highest quality I believe and I can't seem to fix it. Please help! 

Thanks!!

[yashgarg]

Hi @Fabianoo ,

Can you please share your store link, and also mention which banner are you talking about explicitly.

Thanks

Yash Garg

[Fabianoo]

Hi Yashgarg, 

Thanks for reaching out. The link is www.kinandskin.com

[Fabianoo]

It's the 2 main banner at the home page.

[yashgarg]

Seeing the html of one of this banner, I see

<img

srcset="

//kinandskin.com/cdn/shop/files/Kin_Skin_Website_1_ee5ffedf-f91f-4021-a672-3b2b0373dada_375x.png?v=1699332566 375w,

//kinandskin.com/cdn/shop/files/Kin_Skin_Website_1_ee5ffedf-f91f-4021-a672-3b2b0373dada_750x.png?v=1699332566 750w,

//kinandskin.com/cdn/shop/files/Kin_Skin_Website_1_ee5ffedf-f91f-4021-a672-3b2b0373dada_1100x.png?v=1699332566 1100w,

//kinandskin.com/cdn/shop/files/Kin_Skin_Website_1_ee5ffedf-f91f-4021-a672-3b2b0373dada_1500x.png?v=1699332566 1500w,

//kinandskin.com/cdn/shop/files/Kin_Skin_Website_1_ee5ffedf-f91f-4021-a672-3b2b0373dada_1780x.png?v=1699332566 1780w,

//kinandskin.com/cdn/shop/files/Kin_Skin_Website_1_ee5ffedf-f91f-4021-a672-3b2b0373dada.png?v=1699332566 1872w

"

sizes="(min-width: 750px) 50vw, 100vw"

src="//kinandskin.com/cdn/shop/files/Kin_Skin_Website_1_ee5ffedf-f91f-4021-a672-3b2b0373dada_1500x.png?v=1699332566"

loading="lazy"

alt=""

width="1872"

height="1080.0"

class="banner__media-image-half"

/>

Now instead of having min-width in sizes attribute, can you use max-width instead. 

or if you cannot make that change switch 100vw and 50vw.

So essentially 2 solutions to try

either change to - sizes="(max-width: 750px) 50vw, 100vw"

or change to - sizes="(min-width: 750px) 100vw, 50vw"

[Fabianoo]

Thanks! but how do i navigate to this code? 

[PageFly-Oliver]

Hi @Fabianoo ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

<style>
@media screen and (min-width: 750px){
#MainContent .banner--medium:not(.banner--adapt) {
    min-height: 57vw;
}
}
</style>

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly