Zoom on product images
The zoom feature in our themes relies heavily on the size and resolution of the images you upload. The zoom feature works in two stages. On the first interaction, clicking the zoom icon on mobile or the image on desktop displays the original image at 50%. On the second interaction, clicking again on desktop or double-tapping on mobile shows the image at full size (100%).
Additionally, the size of your product images plays a crucial role in the effectiveness of the zoom feature. If you upload smaller images, the zoom effect will be limited, as the image will already be displayed near its full size. For the best results, it’s important to upload large, high-resolution images that provide greater detail when zoomed in. However, keep in mind that larger images can increase load times, so it’s essential to optimize them to maintain performance.
Best practices
- Optimal Image Resolution: To maximize the benefits of the zoom function, we highly recommend using images with a resolution that is 2x zoomable. See our image size recommendations. This ensures that customers can explore intricate details with clarity and precision.
- File Format Considerations: Recommending JPG for product images is appropriate, as it offers good quality at smaller file sizes, which improves loading times. PNG is better suited for images with transparency, but for most product images, JPG is the preferred format for speed and quality.
- Consistency Across Products: The recommendation for consistent image sizes is spot on. Uniformity across product images ensures a cohesive look, which is essential for maintaining a professional aesthetic and enhancing user experience.
- Testing and Previewing: During the website development phase, we strongly advise testing the zoom feature thoroughly. Preview it on different devices to ensure a consistent and positive user experience across various screen sizes. This proactive approach helps identify and address any potential issues before your website goes live.
Additional considerations
- Lazy Loading: If the zoom feature is causing performance issues due to large image files, consider implementing lazy loading. This feature ensures images are only loaded when they enter the viewport, helping with page speed and performance.
- Browser Support: The zoom effect may behave differently across browsers or devices, so it’s important to test and verify compatibility.