Product images are pixelated and poor quality on zoom

Site URL: https://weareposhyarn.com/

I know zoom must work for other people, why won't it for me?! When I enable it, the zoomed in image looks all pixellated and blurry, I will attach a screenshot of the zoomed image, with a photo showing my original image for comparison. I can only assume that SS is shrinking my product photo for speed, and then trying to enlarge from that smaller size, instead of using my original image? But if so, how do other shops manage to have nice crisp zoom in product images? I use a standard 2500 x 2500 for my image sizes, but I have tried uploading a 1500 x 1500 image, a 1000 x 1000, and a 4000 x 4000, to see if anything made a difference, but it didn't..

Can no one help?!! 😭

All the images uploaded to my store page are resized and loose quality when zoomed.

Users need to zoom in and view the clothes so that they can decide to buy.

I guess advises from people that faced this before and solved would help.

kindly don't share links about requirements to resize images before uploading, I am tired of getting these links and trying them from support. The ticket is now escalated but I believe based on the help quality I got from the support so far... that I will get better ideas from the community.

apologies for not sharing the link because the site is still under construction and the release of the clothes collection is not public yet. 

Thank you,

Samer

Thank you Paul,

I see, you mentioned that changing this behavior  cannot be easily changed. I wonder how users selling products that require a high resolution handle that.

I will try to create a new trial website and share an image.

thank you.
Samer

I was debugging the page and noticed that by default the loaded image is 500w. I could tell by the url when i right click and open image in a new tab, if in this new tab, I modify the number after the "=" I can get a better version of the uploaded image

6.jpg?format=1500w

seems that when I change the design "Gallery width", automatically the higher res image is loaded.

That's the tricky part I am working on, while apparently the case needs 1 month to be escalated to reach someone at squarespace that really knows what is going on behind the hood. 

samer

Hi,

I have reached this, which is not bad at all.

When I click on the image, I am displaying the lightbox.  so the lightbox displays the appropriate image according to its width. so the trick here is to make the lightbox wide enough to show a better quality image on click.

I followed the below article and used this code  ( I messed it up a bit)

.gallery-lightbox-item {
  height: auto !important;
  max-width: 1400px !important;
}

.gallery-lightbox-wrapper {
  overflow-x: scroll !important;
  overflow-y: none  !important;
  max-width:1500px  !important;
}

this way I make sure to display the 1500 px version of my image in the lightbox.

so far so good... I am still not happy with the mobile version because I lost the zoom functionality with my fingers, while i still have it on the original image, but for some reason I cannot use my fingers on the lightbox screen to make it bigger. I will keep digging and update the post.

Hope this keeps working as intended and helps someone with similar problem. I am still getting email daily from support that the case is being escalated... 😕 

Samer

Thank you both, for explaining the problem and trying to figure a workaround. It’s a pretty big design flaw!!

Hello!

Is there any update here at all? I've had customers ask for close-ups and I literally can't find a workaround. The lightbox coding above doesn't work for me on a mobile device for some reason.

I'm new to this and don't really know what I'm doing.

Thanks so much 🙂

@Yasmine_Han I developed a plugin to allow pinch-zoom on mobile and also make sure the largest images dimension to be 2500px ( the largest size that Squarespace support )

You can visit the Try it out section on this page to check it with your site's lightbox pre-purchase