Optimum size for images

I want to ask how I should set up the theme to avoid unnecessarily large images that are scaled down through CSS.

Example: https://nordevia.se/product-category/almanackor/

It seems like an image far to large is loaded.

Example: https://nordevia.se/wp-content/uploads/2018/10/asset.5143301.jpg

Hello,

Your product image goes to the product grid and to the product page as the main image. I see you have set zoom. So your image should be big enough for zoom effect.

You can optimize your images before uploading.

There are images options in Appearance > Customize > Woocommerce > Product images

Best Regards

Ok, thanks!

So can i change settings in “Appearance > Customize > Woocommerce > Product images” if I want smaller images in the product grid?

Hello,

Please note smaller image means it would upload a smaller image but the actual grid depends on a number of items in the row.

Best Regards

Ok I see, but can I get the theme to use specific thumbnail images? Because if I copy the address of the image I get the same:

From the grid:
https://nordevia.se/wp-content/uploads/2018/10/asset.5143269.jpg

From the product page:
https://nordevia.se/wp-content/uploads/2018/10/asset.5143269.jpg

Hello,

When I try to open the link I see the error. Where do you copy the images? Can you add them to the product without problems? I am a little bit confused. Do you have a problem with images or need image configuration?

Best Regards

My question is: Can I set thumbnail size for images in the product grid to avoid loading the full image (and then scaling it down through CSS)?

Images loaded in the grid are full size, example: https://nordevia.se/wp-content/uploads/2018/10/asset.5143269.jpg

Hello,

When I try to open the link I see this http://prntscr.com/m4zh9w

In any case, images would be scaled with CSS depending on screen width, product number in quantity. Your images should not be huge and should not be too small as they become blurred

For example, a product on our demo has width: 700px; height: 800px what is enough.

Best Regards

Ok, i see.

But is it possible to use different images for the grid and for the product page? They seem to be the same.

Hello,

No, the default Woocommerce does not provide such an option.

Best Regards

I will add my request that the product carousels that come with the Woodmart theme need to have a control so that we can decide which image size we want used in the product grid.

The problem is that your code is using the larger versions of the product images in the product carousels and that shouldn’t be the case, particularly when the carousel is showing 4 to 6 images at a time. Why not give us the option in the carousel tools to use the medium version. Images will still be scaled down from that in many cases, but not as much. Performance will be better and performance scores should reflect a better outcome too.

Hello,

As for product carousel, now our theme has the option “Main carousel auto height” in the Theme Settings > Product page > Images. Try to activate it and check.

Please read and follow the suggestions provided here:
https://xtemos.com/docs/woodmart/faq-guides/image-size-content-alignment-product-grid/

Best Regards

Thanks for that Elise, but it’s the product and category carousels I’m using on the home page (through the WP Bakery Page Builder) where the problem with not serving scaled images is a problem. Here’s a link: https://www.showcase-express.com

Performance benchmarks give this page a low score, mostly because the images served in all those page builder elements are all resized with CSS.

Hello,

You need to upload images of an equal size to get the best view.

Best Regards

[Author]

Posts