Re: Banner Image not highest quality

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

Fabianoo
New Member
15 0 0

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!!

Replies 6 (6)

yashgarg
Shopify Partner
102 26 38

Hi @Fabianoo ,


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

 

Thanks

Yash Garg

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
Fabianoo
New Member
15 0 0

Hi Yashgarg, 

 

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

Fabianoo
New Member
15 0 0

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

yashgarg
Shopify Partner
102 26 38

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"
If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
Fabianoo
New Member
15 0 0

Thanks! but how do i navigate to this code? 

PageFly-Oliver
Shopify Partner
878 190 185

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.