Issue: Homepage banner images appear low-quality on a Shopify store (kinandskin.com). The concern focuses on the two main banners on the home page.
Findings: The banner uses srcset (up to 1872w) and a sizes attribute set to “(min-width: 750px) 50vw, 100vw.” This can lead browsers to choose smaller image variants on larger screens, reducing sharpness.
Recommended fixes: Update sizes to either “(max-width: 750px) 50vw, 100vw” or “(min-width: 750px) 100vw, 50vw” so desktop receives larger images. In HTML responsive images, srcset lists image sizes and sizes tells the browser how much viewport width (vw) the image will occupy.
Implementation: Guidance was given to edit theme code (Online Store → Themes → Edit code → theme.liquid) and paste code, but the code snippet itself was missing. The requester asked how to navigate to the correct code location.
Status: Unresolved. Next steps: identify the banner’s section/snippet file (e.g., hero/banner in Sections or Snippets), change the sizes attribute accordingly, and test on desktop and mobile. The provided HTML snippet and the absent code block are central to applying the fix.
Seeing the html of one of this banner, I see
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”