Users are experiencing blurry images in the Featured Collection section on Shopify’s Refresh theme homepage, while the same images appear sharp on Product Details pages.
Troubleshooting attempts:
Proposed solution:
One user suggests the issue stems from Shopify’s dynamic image loading using srcset and sizes attributes. They resolved it by removing the sizes property from images inside .card__media, though this caused the full image to load (potentially creating larger file sizes around 1000x1000).
Current status:
Multiple users report the same problem across different Refresh theme implementations. The 1000x1000 workaround hasn’t resolved the issue for all users, and the discussion remains open with participants seeking alternative solutions.
I am getting blurred images on Featured Collection on homepage but good quality on the Product Details that uses the same image. Tried adjusting page width and made difference but whole page is affected and I do not want that.
Also adjusted most image resolution to Shopify image specifications of 4472 x 4472 and lower but didnt change.
Using Refresh Theme
x10care.myshopify.com; www.x10care.com
thank you
Shopify loads the images dynamically using srcset and sizes. Tbh I don’t quite understand how it works, but I’ve had problems with it making the images blurry too. I fixed it by removing the sizes property from the images inside .card__media. It started using the full image, though, so you might want to make yours smaller again, like 1000x1000.
If you have problems doing that feel free to send me a message
I’m having issues on my site as well - the same problem, but with the studio theme. images are uploaded at 950 x 950 and 72 dpi
you can view it here: https://167de1-2.myshopify.com/
Hello, I am having the same issues with Refresh. My collection product images are still blurry. I have tried 1000x1000. Is there another way to fix?