Optimal Image Size When Using Woocommerce

[Tim845]

Hi there - We are using X version 6.5.5 with Woocommerce 3.6.4. While most of the images have been reduced in file size, their physical dimensions vary widely. For example, some product images are 350 x 576, others 650 x 650, etc…

I read through the forum concerning how image dimensions are determined. See the following:

WooCommerce Image Size Changes | Themeco Docs

I checked what settings we have within Woocommerce. For main image width we have it set to 600 and for thumbnail it is set to 300.

Question - What is the ideal dimensional image size for the main image? For example, a square image of at least 600 px wide? (So 600 x 600?)

Our product pages allow the customer to see a larger view of the image by clicking on the image. - How do I determine the maximum image size?

For thumbnails, the 300 setting is what an image would be reduced to, correct?

For category pages, what determines the thumbnail size? For example see this https://devawpny.wpengine.com/product-category/lab-equipment/

For example, the category is using the product images and resizing them to 100 x 100?

For products that use the image gallery, such as https://devawpny.wpengine.com/product/watershed/. What is the ideal size for a gallery image?

Within the above mentioned article, it mentions how you can tell whether you have slider support in WooCommerce activated or disabled. From the layout of our product pages, it would appear that the slider is disabled. But when I check the child themes CSS, I do not see that code that is mentioned in the article.

That being

add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );

Is the slider disalbed?

In summary, we are trying to optimize our images. Uploading them in the correct size to begin with should help the overall speed of the site.
Thanks
Tim

[friech]

Hi Tim,

Thank you for writing in, regarding your questions.

@Tim845

Question - What is the ideal dimensional image size for the main image? For example, a square image of at least 600 px wide? (So 600 x 600?)

The ideal is to double the desired size, for pixel perfect imagery on retina displays (iOS), set the main and thumbnail to be double the size rendered, so if its 600px by 600px make it 1200px by 1200px, this can impact performance though, as larger images take longer to load, its a give and take, It’s up to you if you follow this.

@Tim845

Our product pages allow the customer to see a larger view of the image by clicking on the image. - How do I determine the maximum image size?

What do you mean? If the user clicks the product image the lightbox will show the image in its full/original size.

@Tim845

For thumbnails, the 300 setting is what an image would be reduced to, correct?

For category pages, what determines the thumbnail size? For example, see this https://devawpny.wpengine.com/product-category/lab-equipment/

For example, the category is using the product images and resizing them to 100 x 100?

Yes, that is correct. If you want to change that please follow this documentation.

@Tim845

For products that use the image gallery, such as https://devawpny.wpengine.com/product/watershed/. What is the ideal size for a gallery image?

Same as the main product image because all those images will be shown in the lightbox gallery (full-screen)

@Tim845

Within the above mentioned article, it mentions how you can tell whether you have slider support in WooCommerce activated or disabled. From the layout of our product pages, it would appear that the slider is disabled. But when I check the child themes CSS, I do not see that code that is mentioned in the article.

Yes, your product slider support is disabled, you must have that codes on your child theme’s functions.php file.

Upload all your product images with the same aspect ratio (e.g. 1:1 for square) so they all look uniform on the front-end.

How To Change Woocommerce Product Image Size
Image Sizes for Theme Developers

Hope it helps,
Cheers!

[Tim845]

@friech

Thanks, I just need clarity on one question.

If we look at the thumbnails in this category, https://devawpny.wpengine.com/product-category/lab-equipment/ and we use Firefox to inspect them. Am I correct in that the 100 x 100 thumbnail is being scaled up to 104 x 104?

I did look in the child theme for the code mentioned in this article https://docs.woocommerce.com/document/image-sizes-theme-developers/ but I didnt see it.

My concern is that if the images are indeed scaled, this might be a minor performance issue.

Thanks
Tim

[ruenel]

Hello Tim,

Yes, the image size is 100x100 as the thumbnail size. In the child theme’s style.css, there is a code added like this:

ul.products li.product .entry-featured {
    width: 120px;
    float: left;
    margin: 5px 10px 0 0;
}

It means that the width of the image will be display within a 120 pixel container. There is a default padding of 6 pixel on each size hench, the image is being scaled up to 104 . (104 + 12 = 120 pixel). A small image being scaled up will not affect performance issue. A full image, (1920x1024 for example) being scaled down to 100x100 will do.

Hope this helps.