There could be a few things dictating your image dimensions when using WooCommerce. But the first and likely culprit comes mainly from your theme. It’s design, at max size, has specific image dimensions measured in pixels.
Thus the dimensions you specify at WooCommerce > Settings > Products > Display should match or be higher. The settings here affect the size of the images your theme uses when displaying product images. Again, they do not change the size the image is rendered at.
When your product images are blurry there are two things that could be happening. One, your image size settings may not be adequate (too small) for your theme. This can cause problems as your theme wants an image at 800 x 800 pixels, but you are giving it one at 400 x 400 pixels.
Two, the original images you uploaded aren’t high enough resolution. Even if your image settings are right, the original image source is too small. The only thing you can do in that cause is re-upload appropriate sized images to begin with. Anything at 800 x 800px or higher would work for most themes. We show you how to find the max image size your theme wants in the video and below.
Image types ↑ Back to top
The terms we use are:
- Catalog Images: Medium sized image used in a product loops (e.g., shop page, product category pages, related products, up-sells, cross-sells, etc.).
- Single Product Image: The largest image on the individual product details page.
- Product Thumbnails: The smallest image, a thumbnail, commonly used underneath the Single Product Image, the cart, and widgets.
Finding a Theme’s Product Image Dimensions ↑ Back to top
The theme you chose delegates the max size an image will be, so you need to know the dimensions in which it renders them to set those in WooCommerce.
Catalog Images ↑ Back to top
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.
With the developer tools enable in your browser of choice, you can right-click the image and select “Inspect” or “Inspect Element”. This will tell you the image dimensions. Make a note of this as we need to use them later.
In Storefront (above), the largest catalog images are rendered at 213 x 213px.
Single Product Image ↑ Back to top
Repeat the process for the single product image — the largest image on a product page.
In Storefront, the largest Single Product Image is rendered at 298 x 298px.
Product Thumbnail ↑ Back to top
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 43px.
Adjust image dimensions and regenerate thumbnails ↑ Back to top
Now that all thumbnail image sizes for our specific theme are known, we can add these new dimensions to WooCommerce to ensure that future image sizes 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 commonly known as retina displays contain twice as many pixels, or more, than older displays. For pixel perfect imagery on retina displays, set your thumbnails to be double the size rendered by the theme. For example, if a theme renders images at 80 x 80px you want them to be 160 x 160px.
This can impact performance, as larger images take longer to load. This is a personal preference, and you should consult your analytics before deciding. Your stats should tell you what devices and screen sizes the majority of your customers use.
With the right settings for any future images and regenerating your previously uploaded images everything will look good and blurry images will be a thing of the past!