How to optimize product page images for speed without losing quality

How to optimize product page images for speed without losing quality

kailashg1
Tourist
3 0 1

Hi,

 

I am building my website and trying my best to optimize the site loading speed for SEO. I have been doing this by compressing my product images to around 300kb. However, for my niche it is important that customers can zoom in on product images to see details. The theme that I'm using (superstore by out of the sandbox) has a zoom function but because the images are compressed the details become blurry.

 

Is there a way I can add a zoom function that loads the full resolution image on demand by clicking on the image? This way the full resolution image doesn't need to be loaded in the product grid or on the product page.

 

Thanks.

 

Replies 6 (6)

kazi
Shopify Partner
582 88 110

Hello @kailashg1  You can set different types of picture resolution for product grid and single product you need to edit the liquid template. Can you share the store URL?

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

kailashg1
Tourist
3 0 1

yes it is www.orientalized.nl 

 

the password is eallao

kazi
Shopify Partner
582 88 110

If your theme doesnt support such option you can pick any developer to add it for you.

▶️ If you need more help with your Shopify store
Speed Optimization | Theme Customization ? ☎️ WhatsApp ✉️Email Skype: kof.bd

Cedcommerce
Shopify Partner
718 76 113

Hello @kailashg1

 

For your information, the feature you are asking for is not practically possible. However, if you want to load high-quality on your website to benefit from the zoom feature, you can try other ways of speed optimization for your store. 

 

Let us know if you need any further help with speed optimization. 

 

All the best, 

CedCommerce 

CedCommerce || Shopify Expert
- Let us know if our reply is helpful for you. Like it.
- Was your question answered? Mark it as an accepted solution.
- For further discussion contact: Email ID- apps@cedcommerce.com
- Whatsapp:- Join Here
kailashg1
Tourist
3 0 1
what other ways of speed optimization would you recommend?

flareAI
Shopify Partner
2405 223 541

Hello @kailashg1,

 

Greetings from flareAI app! I am Gina, and I am here to help.


Yes, you can implement a zoom function that loads the full resolution image on demand by using JavaScript or a third-party library. One way to achieve this is by creating a thumbnail image that is compressed and loads quickly on the page, and then using JavaScript to load the full resolution image when the user clicks on the thumbnail image to zoom in.


Here are some steps you can follow:


1. Create a compressed thumbnail image for each of your product images and display them on your product grid or product page.

2. Use a JavaScript library such as jQuery or a specialized image zoom library like Cloud Zoom, Magic Zoom, or Elevate Zoom to implement the zoom feature.

3. When the user clicks on the thumbnail image to zoom in, use JavaScript to dynamically load the full resolution image in the zoomed-in view.

4. To prevent slow loading times, use lazy loading techniques to load the full resolution image only when it's needed. You can also use a preloading technique to load the full resolution images in the background while the user is browsing the page.

5. Test your implementation on various devices and internet connections to ensure that it loads quickly and provides a good user experience.


By following these steps, you can provide your customers with the ability to zoom in on product images without sacrificing the site's loading speed.


Gina

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing