Search

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 using TwentyEleven. 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.
WC-product-image-sizes

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

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 Twenty Eleven at ~280×280 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 TwentyEleven, the Single Thumbnail (the largest of the images), is rendered the same size as the Catalog Thumbnail; 280×280 pixels.

The Product Thumbnail

The largest 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 86×86 pixels.

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 Products Tab, add the new dimensions and 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