One of the first things you must 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.
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 – this can cause image distortion or blurriness. Check the graphic below for a better explanation.
Fixing distortion ↑ Back to Top
We’ll fix a hypothetical distortion issue, as a demonstration. Before starting, make sure that the graphics you upload are large enough in size. Anything from 800×800 and higher would work for most themes.
Thumbnail Types ↑ Back to Top
The terms we use are:
- Single Product Image: Largest thumbnail on the product details page.
- Catalog Images: Medium sized thumbnail used in product loops (e.g., categories, related products, up-sells, cross-sells, etc.).
- Product Thumbnails: Smallest thumbnail used in product galleries on the single product pages, the cart and widgets.
Find the size your theme renders thumbnails ↑ Back to Top
The theme you chose delegates how big the pictures will be, so you need the dimensions in which it renders them.
Determine where your theme renders catalog thumbnails the largest. In some cases, this is the shop page; in the Twenty Eleven theme, it is in the related products loop.
If you’re using Chrome, you can right click the image and select Inspect Element. The same can be done in Firefox using Firebug. This gives you the image dimensions. Make a note of this.
In Storefront (above), the largest catalog thumbs are rendered at ~213 x 213 pixels.
Repeat the process for the single thumb — large image on product details page.
In Storefront, the largest Single Thumbnail is rendered at 298 x 298 pixels.
The smallest is likely the thumbnail in the product gallery. Repeat the inspection process to get the dimensions.
In Storefront, it renders at 43 x 43 pixels.
Input the data and regenerate the thumbnails ↑ Back to Top
Now that all thumbnail image sizes for our specific theme are known, we can add new dimensions to ensure that future thumbnails will be this size or larger.
In WooCommerce > Settings > Products > Display, be sure that the maximum image sizes are at least as big as the dimensions your theme is rendering for those thumbnails. Then Save Changes.
Any new product images that are uploaded will now have thumbnails in these settings, and should appear without distortion or blurriness.
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.