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 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

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
  • 4 months later...
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.

Link to comment
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.

Screenshot 2023-02-03 141749.png

Link to comment
  • 1 month later...

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

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.