Jump to content

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

Recommended Posts

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 🙂

scrn5.jpg

scrn6.jpg

2SCRN.jpg

Edited by Yasmine_Han
spelling error
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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 🙂

scrn5.jpg

scrn6.jpg

2SCRN.jpg

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

Edited by jonymark88
Link to comment

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.

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.