Using appropriate image dimensions to avoid distortion / pixellation

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

Therefore if your settings aren’t appropriate (too small) for your theme, you could encounter image distortion. That may be a little tricky to get your head around, the graphic below helps to explain.


Ugly Distort

Ugly Distort

To ensure your images aren’t distorted make sure these settings are appropriate for your theme. If you’re using a WooTheme these settings should be updated upon activation. You will just need to run Regenerate Thumbnails to regenerate any previously uploaded thumbnails.

A working example ↑ Back to Top

As a quick demonstration we’ll fix a hypothetical distortion issue using TwentyEleven. But before diving in, there’s a caveat: Make sure that your raw product imagery (the graphics you’re uploading) are of an adequate size. If they’re not, this is a pointless exercise. Anything from 800×800 and up would be appropriate 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 are the largest thumbnails and are used on the product details page
  • Catalog Images are the medium sized thumbs and are used in all product loops e.g. categories, related products, up sells, cross sells etc
  • Product Thumbnails are the smallest thumbs, used in product galleries on the single product pages, the cart, and widgets such as featured / recent products

Since WC 2.1+, these settings are located in WooCommerce > Settings > Products

Find out the size your theme renders thumbnails ↑ Back to Top

The first step to fixing any distorted images is to find the dimensions your theme renders each type of thumbnail.

The catalog thumb

To do this, find the place 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 dimensions.

Here we can see the catalog thumbs are rendered (at their largest) in Twenty Eleven at 280x280px. Make a note of this.

The single thumb

Repeat the process for the single thumb (large image on product details page).

It just so happens that in TwentyEleven that largest dimension the single thumb is rendered matches the catalog thumb; 280x280px.

The product thumb

The largest rendering of product thumbs is most likely in the product gallery. Repeat the inspection process to get the dimensions.

In this case, 86x86px.

Input the data and regenerate the thumbnails ↑ Back to Top

Now that we know what size our theme is rendering the thumbnails, we can tell WooCommerce to make sure that all thumbnails created henceforth are of adequate size. (Adequate size being equal to or greater than the dimensions we just gathered from the theme).

In the catalog tab add the dimensions you made a note of and save the settings.

Any new product images uploaded will now have thumbs in accordance to these settings, and will appear without distortion/pixellation on the front-end.

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

A side note for retina displays: These HiDPI displays contain twice as many pixels as standard displays. Therefore, for pixel perfect imagery on retina displays, set your thumbnails to be twice the size that they are rendered by the theme. So if a theme renders thumbs at 80×80, you want them to be 160×160.

Bare in mind this can impact performance as larger images obviously take longer to load. This is therefore 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