How do I increase the quality of click/hover zoom on product images?

How do I increase the resolution of zoomed product images on my site? The click/hover features both display a very pixelated, low-quality image.

It's not utilising the full image size to zoom in and instead, appears to merely zoom into the smaller, web-display version on the product page. I have tried resizing the images, going from 500KB to 20MB - all of them look equally pixelated on zoom.

The first image shows what the artwork should look like when zoomed-in - vs. what it actually looks like using the zoom feature. The third image is of 2 versions of the same piece; however one is 4806 x 3399 pixels, the other 1748 x 1240 pixels - and they both look equally pixelated when using the zoom feature, despite one being almost 3x higher in resolution.

Thank you 🙂

On 9/22/2022 at 3:49 PM, Yasmine_Han said:

How do I increase the resolution of zoomed product images on my site? The click/hover features both display a very pixelated, low-quality image.

It's not utilising the full image size to zoom in and instead, appears to merely zoom into the smaller, web-display version on the product page. I have tried resizing the images, going from 500KB to 20MB - all of them look equally pixelated on zoom.

The first image shows what the artwork should look like when zoomed-in - vs. what it actually looks like using the zoom feature like sssniperwolf here. The third image is of 2 versions of the same piece; however one is 4806 x 3399 pixels, the other 1748 x 1240 pixels - and they both look equally pixelated when using the zoom feature, despite one being almost 3x higher in resolution.

Thank you 🙂

I would like to learn more about this.Please share any solutions you find with me.

I'm working on a different issue with the zoom feature, but I noticed the problem with image quality. Squarespace scales images that I upload at 2000px wide down to 1000px wide (less on smaller screens), and uses the same size image for both product display and zoom. A solution that I found for image quality was to reduce the gallery width on product pages so that it's smaller than the intrinsic size of the image. The 1000px wide product image is sharper when the gallery width is constrained to 600px wide.

You can use devtools in your browser to find the exact width of the gallery and rendered image sizes.

On 9/30/2022 at 12:27 AM, RScott said:

I'm working on a different issue with the zoom feature, but I noticed the problem with image quality. Squarespace scales images that I upload at 2000px wide down to 1000px wide (less on smaller screens), and uses the same size image for both product display and zoom. A solution that I found for image quality was to reduce the gallery width on product pages so that it's smaller than the intrinsic size of the image. The 1000px wide product image is sharper when the gallery width is constrained to 600px wide.

You can use devtools in your browser to find the exact width of the gallery and rendered image sizes.

Can you please share the code on this? Finding workouts has been frustrating.

On 2/2/2023 at 6:46 AM, UltimateBadass said:

Can you please share the code on this? Finding workouts has been frustrating.

It's been awhile since I worked on this, but the gallery width slider is on the product page layout. Go to a product, click the top left Edit button, then Edit Design, then Edit Section. You need to find the exact width of the gallery and product image sizes in your browser's developer tools. Here's a screenshot from Chrome DevTools for one of our products that shows the image sizes. Reduce the gallery width so that it's less than the product image's instrinsic size. Save the changes to the product page and check the live website to see if image quality is better.

According to Squarespace document, images can have max width of 2500px, so you need to check your devtool to inspect the actual width of the zoom image. It will be helpful if you can share your site URL so we can help having a look

https://support.squarespace.com/hc/en-us/articles/206542517-Formatting-your-images-for-display-on-the-web

July 2024 Update:

Now you can use the origin image as alternate image on lightbox, so that will effectively increase the zoom quality of your image when zooming, Check it out in detail on this post