Blurred images and scaling

Hello, I use a resolution of 800×800 for the products in the shop. The display is good for the woocommerce part but during the performance tests, the images are not served at scale and slow down the loading. On the home page, I use a carousel of product images that I set to 276×276 to serve them at scale but they appear blurred! I remind you that the original resolution is 800×800.

Small precision : The image size settings in “woocommerce customization” are :
Width of the main image : 600
Miniature width: 300

Can you tell me what settings you made to serve scaled and unblurred images

Thanks for your help

Hello,

I have visited your website. The product images are controlled by WooCommerce and our theme doesn’t influence them. WooCommerce provides settings for images that you can find under Appearance >> Customize >> WooCommerce >> Product Images.

As you said that you set the product thumbnail width as 300 and they display fine on shop. Then you added the 276x276px crop to the images in the carousel. So in your case the 300x300px image is rescaled by the carousel element in 276x276px that’s why the quality is less.

You can try setting the image size to full in the carousel then the images will be displayed in the resolution as they are on the shop pages.

I hope my explanation will be clear enough to understand the working.

Best Regards.

How to put it: The image size settings in the “woocommerce customization” are: Main image width: 600, Thumbnail width: 300.

Our original product images have a size of 800×800.

However, during tests it turns out that it is not the thumbnails (300×300) that are served but the full images (800×800).

I just made the change on the carousel of the home page. When I leave the field empty in the image settings, it’s the thumbnails that are supposed to be served but it uses the full images (800×800).

Same on the shop page: images resize from 800×800 to 190×190.

If I understand correctly, he should use the 300×300 thumbnails.

Can you confirm?

Important !

sorry

Hello,

I have visited your website again and the product on the shop area taking the image that is 300×300 means that The cropping is working correctly.

Please set the image size for the product carousel to full instead of leaving it blank and then check back.

I haven’t added the screenshot of your website as you said.

Best Regards.

Ok, I’ve just resized the image size of the homepage carousel to 276×276 as recommended by Gtmetrix. I feel like the images are blurred only on my 4K screen. The problem probably comes from this screen resolution. On the other hand, the page weight drops considerably, and loading is much faster when using the appropriate image resolution 276×276. If you didn’t notice any problems while visiting the site, I think the subject is closed.

Thanks for being present at each of our requests.We try our best to solve the “anomalies” by ourselves to avoid asking you, but sometimes we have no choice! Thanks and good continuation

Hello,

I have revisited your website and see that the crop is working absolutely fine and there are no issues with the crop.

Yes, it’s the screen resolution that is causing issues for you and I am able to see the carousel images in good quality.

We are thrilled that you loved your experience with XTEMOS, We put customer experience and satisfaction as our priority, and your words reaffirms the hard work we put in every day. So thanks for your kind words and we look forward to seeing you again.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.

[Author]

Posts