Jump to content

Product images are pixelated and poor quality on zoom

Go to solution Solved by paul2009,

Recommended Posts

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

 

imgzoom.jpg

 

thisjoyandi1.jpg

Edited by poshyarn
clarity
Link to comment
  • 2 weeks later...

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

Link to comment
  • Solution
20 hours ago, sam_sam said:

Images uploaded to my store page...lose quality when zoomed

Hi @poshyarn @sam_sam

Instead of using the "zoom" feature, I recommend that you manually take some close-up images of each product with your camera. You can then upload these more detailed images with the standard images that you have already added. Customers can then look through all the images - the crisp, close-up images as well as the standard images, without using the "zoom" feature.

The zoom feature is flawed because it doesn't show a higher resolution version of your product, It just zooms in. To explain, when you upload a large product image (for example 4000-pixels wide), Squarespace creates seven versions of that image in addition to the original. Each version varies in width from 100-pixels to 2500-pixels and when a product detail page is shown to a customer, the Squarespace image-loader chooses what it considers to be the most appropriate one of these images, based on the visitor's screen width. I find that on a typical hi-res "Retina" Macbook display, the 1500-pixel version of the image will probably be used.

In most circumstances, the image loader does a pretty good job of selecting the image based on the width and the quality of the screen, loading a smaller image on smaller or lower quality phones and a higher quality version on a 27-inch 5K display. However, the image loader does not seem to take account of product zoom. So, when a visitor clicks or hovers a product image to zoom in, Squarespace does not load a new higher-resolution version of the image, for example the 2500px or 4000px version. Instead, it uses the same version that it used initially but simply applies a "transform" to scale the image to a larger size -such as 3x. This means that the image has been zoomed in further than the pixel count intended. You therefore see the individual pixels, and the image looks worse than you'd like.

I hope this explains why adding additional images is a better solution.

Was this post informative? Please give feedback by clicking an icon below  ⬇️

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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

Link to comment

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

Link to comment

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

 

Link to comment
  • 5 months later...

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 🙂

Edited by Yasmine_Han
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.