Re: Images on collections page either not loading in fast enough or not loading properly

Images on collections page either not loading in fast enough or not loading properly

egomaniac
Visitor
2 0 0

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!

Replies 4 (4)
egomaniac
Visitor
2 0 0

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.

OneCommerce
Shopify Partner
253 19 110

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&amp;width=1946" alt="" srcset="//cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=246 246w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=493 493w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=600 600w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=713 713w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=823 823w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=990 990w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=1100 1100w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=1206 1206w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=1346 1346w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=1426 1426w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;width=1646 1646w, //cdn.shopify.com/s/files/1/0684/8636/5464/products/egomaniac-brown-hoodie.png?v=1671762081&amp;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

OneCommerce - The Ultimate eCommerce Solution Platform
We offer 12+ solutions to help increase traffic, maximize conversion rates and generate better revenue for more than 500,000 eCommerce merchants worldwide.

Get know us at: Website | Blog | FAQ | Contact us

PageFly-Victor
Shopify Partner
7865 1786 3127

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:

  • Optimize all the product images using tools like Tiny PNG (and others, I suggest it as it’s a free tool) to reduce the image weight while keeping the quality almost the same
  • Apply lazy loading to the collection page (you may search for code from the internet or using apps) so the images only load when they need and leave the resources for the ones in used

 

I hope the information above will be useful!

 

Victor | PageFly

Cedcommerce
Shopify Partner
718 77 116

Hello @egomaniac

 

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' }}   

 

Output: //cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light_large.jpg?v=16548288...

 

{{ 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

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here