One of the first things you need to know about image dimensions in WooCommerce is that many themes (and the default WooCommerce CSS) specify product image widths to ensure consistent layouts across multiple devices.
The 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.
When this happens, there is a possibility that your settings may not be adequate (too small) for your theme – which can cause image distortion (blurriness). Check out the graphic below for a better explanation.
Example ↑ Back to Top
As a quick demonstration we’ll fix a hypothetical distortion issue. Before starting, make sure that the graphics you’re uploading are of a big enough size. Anything from 800×800 and up would work for most themes.
Thumbnail Types ↑ Back to Top
In this example we’ll be using the terms ‘Single Product Image’, ‘Catalog Images’, and ‘Product Thumbnails’ as listed in the image settings. These thumbs are used in various areas:
- Single Product Image: The largest thumbnails used on the product details page.
- Catalog Images: The medium sized thumbnails used in all product loops (e.g. categories, related products, up sells, cross sells, etc.).
- Product Thumbnails: The smallest thumbs, used in product galleries on the single product pages, the cart, and widgets.
Find out the size your theme renders thumbnails ↑ Back to Top
Since the theme you have chosen delegates how big the pictures will be, the first step to fixing any distorted image is to find the dimensions your theme renders them in.
The Catalog Thumbnail
Find the place where your theme renders catalog thumbnails the largest. In some cases this will simply be on the shop page, in Twenty Eleven however, it is in the related products loop.
If you’re using Chrome you can simply right click the image and select ‘inspect element’. A similar thing can be done in Firefox using Firebug. This will give you the image dimensions.
Here we can see the catalog thumbs are rendered (at their largest) in Storefront at ~213 x 213 pixels. Make a note of this.
The Single Thumbnail
Repeat the process for the single thumb (large image on product details page).
It appears that in Storefront, the Single Thumbnail (the largest of the images), is rendered the same size as the Catalog Thumbnail; 298 x 298 pixels.
The Product Thumbnail
The smallest rendering of Product Thumbnail is most likely in the product gallery. Repeat the inspection process to get the dimensions.
In this case, it renders at 43 x 43 pixels in Storefront.
Input the data and regenerate the thumbnails ↑ Back to Top
Now that we know what size our specific theme is rendering the thumbnails, we can add the new dimensions to make sure that any future thumbnails will be this size (or bigger).
In the Display tab of the Products settings, you will want to make sure that the maximum image sizes are at least as big as the dimensions that your theme is rendering those thumbnails. Then you can save the settings.
Any new product images uploaded will now have thumbnails in these settings, and will appear without being distorted or blurry.
Retina Support ↑ Back to Top
HiDPI displays contain twice as many pixels as standard displays. For pixel perfect imagery on retina displays, set your thumbnails to be twice the size rendered by the theme. If a theme renders thumbs at 80×80, you want them to be 160×160.
This can impact performance as larger images take longer to load. This is a personal preference and you should consult your analytics before deciding.