Using appropriate image dimensions to avoid distortion / pixellation

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.

Ugly Distort

Ugly Distort

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.
Since WC 2.3, these settings are located in WooCommerce > Settings > Products > Display

Since WC 2.3, these settings are located in WooCommerce > Settings > Products > Display

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.

WooCommerce Product Image - Thumbnail Size

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).

WooCommerce Product Image - Product Featured Image

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.

WooCommerce Product Image - Product Gallery

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.

Please note: Saving changes does not automatically update all previously uploaded product imagery. To update old images WordPress needs to regenerate the thumbnails. There’s a great plugin which does just that; Regenerate Thumbnails.

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.

Video tutorial to help fix blurry images ↑ Back to Top

Please note: If your store images don’t appear to be the same sizes you have defined in Woo Commerce > Settings > Products, then your theme is likely affecting the sizing of the images. You will need to add custom CSS to your theme to override this.
Back to the top