Product images blurry/ very low quality on featered collections. But high resolution on PDP and high resolution image used as content

[HereNowOwner]

Hi,

Images of my products in a featured collection are showing up as very blurry and low quality. However, the image I use for this product is high resolution and when you click on the product to show in the product detail page everything looks sharp and perfectly fine.

When zooming in on the page to 300-400% the images in the featured collection suddenly rending in on the original quality and everything looks. Good. I’ve been looking here for solutions and trying different things but I am loosing my mind as to why this is happening.

Below screenshots of what is happening with the URL to my store.

Blurry images on homepage featured collection:

Images after zooming in on that page to 400%:

Images of that same product on PDP:

What I already tried:

• Uploading higher resolution images

• Changing product-card code divide from 4 to 1:

  product-cart → change these lines (there are a couple of them in that file:

  sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }

  Deplace the 4 by 1.

Any help is greatly appreciated as I am running into my knowledge limitations and this is impacting the overall quality & feel of the store greatly.

here\\\now. | Official Streetwear Store

[HereNowOwner]

One thing I forgot to add. Currently im using high-quality PNG images with 1896px x 1896px

[devcoders]

(post deleted by author)

[HereNowOwner]

Hey @devcoders

Thanks for the fast and elaborate response.

I tried option 1 without effect. I am using DAWN theme and the product.featured_image can’t be found. Do you know which exact naming dawn uses for this element so I can search more specifically?

2. Where should I apply the sized=“100vw” line exactly?

3. I inspected an image and I found that srcset is present with the below values. It does seem to me that its lazy loading a low-res preview. Is that correct? If so, what can I do to fix this?

4. Should I add this code to the base.css? Or anywhere specific?

Still looking at options as you can see. Haven’t found the fix. Thanks again!

[tim_1]

There are 2 things affecting your images now.

1. You’ve stretched your collection from “page width” to full-bleed. Now your images are stretched much larger then your sizes attribute originally supported.
   
   Basically, it was designed so that if screen width is higher than “page-width”, then your image should be ~ “page-width” / number of images.
   For default 1200 page width, images were never supposed to grow over 300px-wide.
   
   
2. Your sizes are broken now and load images which are too big (and this may be not good for image clarity too!)

Your sizes is like this now:

  (min-width: 1600px) 1470px, 
  (min-width: 990px) calc((100vw - 130px) / 4), 
  (min-width: 750px) calc((100vw - 120px) / 3), 
  calc((100vw - 35px) / 2)

Which means, for example that “for screens wider than 1600, load image which is about 1470px wide.”

So, for screen which is 1920px wide (and the actual image width is 462px), browser will load image which is 1896 px wide which is 4 times more than needed.

Your sizes needs to be like this for your current configuration:

 (min-width: 990px) calc( (100vw - 2 * 30px - 3 * 8px) / 4 ), 
 (min-width: 750px) calc( (100vw - 2 * 50px - 1 * 8px) / 2 ), 
                    calc( (100vw - 2 * 15px - 1 * 4px) / 2 )

Let me know if you need the numbers explained, but basically it’s
screen width minus padding on the screen edges minus gaps and then divided by number of products per line.

You may do calculation for px values and simplify it, I’ve kept it like this for better understanding.

PS – You need to understand what’s going on with your images, otherwise you can easily worsen things. There is not simple “solve-all” recipe.

Say, forcing images to be 600px instead of 300px may bump up the perceived sharpness, but will penalize your PageSpeed.
Also, 600 may be not enough too, especially considering Retina screens, etc.

[DavidHenry]

This usually happens because Shopify is rendering a smaller responsive image for the featured collection section, even though the source file is high-res. When you zoom in, the browser requests a larger version — that’s why it suddenly looks sharp.

A few things to try:

In your product-card or card-product file, increase the sizes attribute so Shopify serves a larger image.

Make sure | image_url: width: 600 or similar isn’t limiting the output size — bump the width to 900–1200px.

Check theme settings → Image ratio or “Crop” options; some themes force aggressive downscaling on collection grids.

Clear cache or use an incognito window — Shopify sometimes caches old resized images.

I run into similar presentation issues while managing online docs for my bail bonds tampa service, and increasing the served image width usually fixes blurry grid thumbnails instantly.

If you want, I can check your store URL and tell you exactly which line to modify.