How to Trigger High-Quality Image on Pinch Gesture for Mobile Product Page?

[alejoalonzo]

Hey everyone, I’m trying to enhance the way product images are displayed on the product page of my store, specifically for the mobile version. Right now, when a product image loads, the user can tap the screen or the magnifying glass icon to open a pop-up with the same image but in higher quality. What I need is to show that high-quality image when the user does a pinch gesture as well. How can I make this happen?

The store>> https://queondastore.com

[Kitana]

Hi @alejoalonzo, thanks for reaching out to the Shopify Community. 

To keep load times fast, Shopify will automatically compress images when they're displayed on your online store. Compressing an image means reducing the file size to allow for faster page loading. I have a few tips that should help you to export clearer images:

• If your images are PNG, I suggest exporting in JPEG (same quality for smaller Kb size)
• You will want to make sure your images are around 100-150Kb (if your source images are all high quality then they are probably much bigger than this, so you'll need to optimize them down to an appropriate size).
• If you optimize them to 85% as a JPEG then Shopify won't optimize them further, so you should get the results you are expecting.

You can also read more about image optimization here. 

[alejoalonzo]

Thanks Kitana, so what you suggest is that there is no zoom or pop up, but rather a more compressed image is loaded from the beginning, so if the user pinches or touches the mobile screen the higher resolution image is not loaded, but rather a zoom is made on the same image loaded from the beginning, is that correct?

[Moira]

Thank you for your clarification. What was suggested was primarily focused on optimizing the images for faster load times, which is essential for a smooth user experience on mobile devices. However, it seems you are looking for a specific functionality related to pinch-to-zoom gestures.

To achieve the pinch-to-zoom functionality without loading a separate high-resolution image, you would need to implement some custom coding into your theme. This would allow for smooth pinch-to-zoom interactions on mobile devices using the same image that is initially loaded, thus avoiding the need to load a separate high-resolution image.

You can work with a Shopify Developer here if you wanted to go down this path.