product images too blurry in mobile devices

Hello team

Hope you are well,

The product images are blurry in mobile devices and it is clear in laptops and desktops. The images are not clean in normal thumbnails and products images and also when we click to enlarge the image and zoom in on mobile, the image gets blurry and my customers are not able to see the clear details on the product in images. However when i clicked the same on laptop, the images are clear and detailed even after zooming in. since most of our customers use mobile, this creates a bad experience for the users.

I need to know how can we fix this. Please help

Hello,

I have checked your site, and the product images are displaying clearly on mobile as well. Could you please share some screenshots showing where the images appear blurry on your device? This will help us identify the exact issue and guide you with the right solution.

Best Regards,

Hello

Thanks for the response.

I am attaching the screenshot here from mobile and laptop. Both the screenshot include the zoomed up image of one of the product. This is the same case for all the product images in my website which i have uploaded. This is the product link which has those images in the screenshot. https://tocgwatches.com/product/porsche-boxter-718-gyro-watch-steel-strap/ Also in my observation the images even without zooming in is also slightly blurry on mobile, compare to those on laptop.

I have uploaded the same images in one of my other Shopify store and in that Shopify store the details on the images remains exactly same in mobile, as well as in laptop, even when zoom or zoom out, so I can assure that there is no issue with the quality of the images.

However, I believe there is some issue in the website, which is reducing the clarity of the images in mobile.

Hello,

You have missed the screenshots. Can you please share a screenshot for better understanding?

Best Regards,

Please find the attached screenshots

Due to the size of the file, the screenshots are not getting uploaded. Please use the below Drive link where you will find both the screenshots. https://drive.google.com/drive/folders/1KXvehZEidFbHDqke5oyh5Bj9YRgYxiXX?usp=sharing

Hello,

I have checked your site and can confirm that the product images are in good quality.

The difference you notice on mobile is due to the smaller display size to fit the mobile screen, which can make fine details appear less sharp compared to desktop.

The original image quality remains the same. On mobile, you can click to enlarge the image to view it in higher detail.
Basically, the product images are controlled by WooCommerce and the WoodMart theme doesn’t influence this.

Here is the WooCommerce Manual: https://woocommerce.com/document/fixing-blurry-product-images/

Best Regards,

Hello Team

Thanks for the response.

I have made all the changes in woo commerce and still the issue persists, I want to know if you have any under theme setting or anywhere else which can influence the catalogue images and product images. Please let me know so that I can do the changes to see if it fixes. I really need your help in this as I have received a lot of queries saying the images aren’t clear in Mobile. Please help me out if there are any theme settings which I can look into.

Hello,

Basically, the product images are controlled by WooCommerce and the WoodMart theme doesn’t influence this or not option in theme settings for optimizing images. The size of the thumbnail you set should be larger than the size of the product thumbnail displayed on the shop page. If the thumbnail size is smaller than what the default size expects, it may appear blurry or not display correctly.

You can find the sizes used on the demo here:
https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

Here is the WooCommerce Manual:
https://woocommerce.com/document/fixing-blurry-product-images/

Best Regards,

[Author]

Posts