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.