Hi all! I am running into some issues were my images are blurry only on the home (collections) page. When I click on the product the quality is fine but when the images are previewed on the home page they are blurry. I thought I fixed it by changing some code in card-collection.liquid but it went back after a couple minutes (have not been able to fix it on mobile). I have seen some posts that this is some type of issue with how shopify compresses images to improve loading speed. I have looked into the code and message around w my images for hours but I cannot seem to fix this issue. Can anyone help? My site is ribbieslams.com password is eghahd.
Hello
Looks to me like you need to upload a bigger file. I also just google ‘Shopify product image sizes’ and recommended sizes come up.
I tend to run 2048X2048 either png or recommended jpeg to benefit loading speed.
examples below.
www.uketastic.com
hoped this helps.
This is David at SalesHunterThemes.
Thank you for your question.
Please share your store URL, page URL and also password (if your store has one) so we can help you.
and if you can please share the code, so we can check.
Hey there,
After reading multliples answers, I did not find any solution for the Spotlight theme. Then I tried to look at the issue with the Chrome code inspector (F12) and I found the line that caused the issue.
In the file card-product.liquid, in the class card__media, try to comment or delete the line :
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
You should find it around l.69 in the file.
That worked nicely for me!