Product Image sizes

When uploading product images for WooCommerce, we recommend you prepare all the images onto the same size canvas (download one below) before uploading them to your site.

This will prevent them displaying at different sizes/dimensions and showing up blurry.

Download a product image template

It is always better to optimize the images before uploading them to your site.

 

This will ensure WooCommerce can do the correct cuts to the image and display them correctly on your site.

Note: Dimensions you specify on the Products tab of the WooCommerce settings screen affect the size of the thumbnails that the theme uses when displaying product images. They do not change the size the image is rendered.

If you upload an image smaller than the specified cut then it’ll insert the full size image and this is how they display at different sizes and become blurry/pixelated.

Now that all image sizes for the theme are correct, you can add new dimensions to ensure that future thumbnails will be correct.

In WooCommerce > Settings > Products > Display, be sure that the maximum image sizes are within the size uploaded… and if you need to change the product cut sizes then you can save the new dimensions and you’ll then need to Regenerate Thumbnails.

Blurry product images:

 

Read more about image sizes on the WooCommerce documentation:
https://docs.woocommerce.com/document/fixing-blurry-product-images/