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





Edited by poshyarn
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,


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

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

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.

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


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. 



Link to comment


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




Link to comment
  • 5 months later...
  • 5 months later...

@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

chrome-capture-2023-2-13 (2).gif

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


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.