Search

Using appropriate image dimensions to avoid distortion / pixellation

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.

Ugly Distort

Ugly Distort

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

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

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.

Catalog Thumbnail

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.

WooCommerce Product Image - Thumbnail Size

In Storefront (above), the largest catalog thumbs are rendered at ~213 x 213 pixels.

Single Thumbnail

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

WooCommerce Product Image - Product Featured Image

In Storefront, the largest Single Thumbnail is rendered at 298 x 298 pixels.

Product Thumbnail

The smallest is likely the thumbnail in the product gallery. Repeat the inspection process to get the dimensions.

WooCommerce Product Image - Product Gallery

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.

Note: Saving changes does not automatically update all previously uploaded product imagery. To update old images, WordPress needs to regenerate the thumbnails. A great plugin that does just that is 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

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