Hello there!
I’m using the Sense theme and unfortunately experiencing that the largest image on the collage is blurry.
All images are uploaded in a larger format than any of the img containers.
It looks like the initial image is being scaled up but from a smaller image.
The rendered size is much bigger than the intrinsic size- which is what I think is causing the issue.
I’d love some help as to how to change this, so that the image is sharp.
Site is https://vonstreg.com/ (PM me for the pass)
Kind regards
Von Streg
It looks like you added smaller size in collage snippet. You should add master image filter there.
Images are uploaded correctly but there size is not used smaller than actual one
Hello Pawankumar
I’m not sure I follow.. the image I uploaded was the big one (I don’t have smaller images lying around and haven’t been fiddling with the code snippets directly).
When I view the image in the individual product view and then go back to the collage view, the image isn’t pixelated anymore.. so maybe it has something to do with some caching settings?
Kind regards
Allan
Hi @vonstreg
We checked your issue and saw that your problem may be caused by two attributes srcset and sizes located in your image. When the page loads, sizes calculate the frame size based on the current screen size, then automatically selects the image in the srcset with the most appropriate size.
Maybe on the first load it calculated and selected the image with a small intrinsic size. When you view the image in the product detail and go back, it has been recalculated, and selected the image with a larger intrinsic size. You can see details about these 2 properties here:
https://developer.mozilla.org/en-US/docs/web/api/htmlimageelement/sizes.
A suggested solution to fix your problem is to leave out the srcset and sizes attributes and use a fixed image size.
I hope this can help you solve the issue.
1 Like
Hello again
I don’t know how to leave out the scrset and sizes attributes, so guess I’ll use a different collage display. I find it strange that the out of the box solution by Shopify results in pixelated images..
In any case, thank you very much for your help in clearing this up.
Hopefully someone else can use benefit from your answer 
Cheers
Von Streg
1 Like
In card-product.liquid,
under class card_media, at line 67,
change “divided_by: 1” to “divided_by: 4”. It will fix the issue.
By the way, Checkout our PlusPage App in Shopify Appstore for Page design and add a lot of customization to your page.
1 Like
Hi, did you manage to find a solution in the end?
