Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hello! I'm facing an issue with some of my product's images not loading as high quality as I'd like them to be on the collections page. They look better once I click on the product and go to the specific product's page.
My website is egomaniac.store and the issue is happening on https://egomaniac.store/collections/all
Password is "rtawld"
Thank you!
Thank you for your help, but the issue is that some of the product's images are blurry while others are not, even though they are all the same image resolution.
Hi there
You can copy code of product image, then the problem will be resolved
<img src="//cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=1946" alt="" srcset="//cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=246 246w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=493 493w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=600 600w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=713 713w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=823 823w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=990 990w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=1100 1100w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=1206 1206w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=1346 1346w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=1426 1426w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=1646 1646w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&width=1946 1946w" width="1946" height="1946" sizes="(min-width: 1200px) 495px, (min-width: 990px) calc(45.0vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw / 1 - 4rem)">
Therefore, if you want to resolve those problems, you can contact us at the mail: julia@onecommerce.io for more support
Get know us at: Website | Blog | FAQ | Contact us
Hi @egomaniac ,
This is Victor from PageFly - Shopify Page Builder App.
I've checked the Collection page and the product page of each. I think that one of the reasons could be that the collection page needs to load more images (12 images for normal and hover state) than the product pages (1-3 images).
At first, the products at the bottom (Egomaniac black tee and white tee) are the blurriest but overtime, they would have the high quality as the product page.
So I have some suggestions:
I hope the information above will be useful!
Victor | PageFly
We would be really happy to help you with this.
To avoid such problems, always make sure to upload optimized, high-quality images of the products.
We suggest you hire a Shopify expert who can help you fix this.
By using the filter 'master' in your code, you can render high-quality images as the filter 'master' loads original images.
Find the code below to render the images.
<img src="{{ block.settings.gallery_myimage | img_url: 'master' }}" alt="Paris" width="100%" height="100%">
Or else,
{{ product.images[0] | product_img_url: 'large' }}
{{ product.featured_image | product_img_url: "master" }}
Output: //cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801
Similarly, you can use other filters based on your requirements.
For better help, we are providing information on some filters with their rendered image sizes.
Pico - 16x16 px
Icon- 32x32 px
Thumb- 50x50 px
Small- 100x100 px
Compact- 160x160 px
Medium- 240x240 px
Large- 480x480 px
Grande- 600x600 px
Originalmaster - 1024x1024 px
If you need further help with the issue, please connect with us.
Regards,
CedCommerce
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025