Images and videos of any products can make or break your online store. Your images need to be clear and properly sized so that customers can find and inspect the items they will be purchasing without any hesitation and confusion.

At the point of view when your products pictures are foggy/hazy there are two things that can happen:
First, your picture settings may be too small for your topic. This can be a problem as your subject needs a picture at 800 x 800 pixels, while you are giving it one at 400 x 400 pixels or less.

Second, the original pictures you uploaded don’t have sufficient resolution. Regardless of the possibility that your picture settings are correct, the original picture source is too small. The only thing you can do in that case is re-upload adequately sized pictures in the first place. Anything at 800 x 800 pixels or higher resolution would work for most themes.

Here is a small video on how to find the max image size with your theme.

Fix Blurry Product Images

Image types

As above the screen shot the types are as under:

Single Product Image: It is the biggest image on the individual product details page.

Catalog Images: This is the medium size image used in product loops, such as the Shop page, Product Category pages, Related products, Up-sells and Cross-sells.

Item Thumbnails: This is the the smallest picture and normally used underneath the Single Product Image, the cart, and widgets.

Standard image dimensions

You have to enter site admin panel and go to WooCommerce > Settings. Under the Products tab you will see the Display option, which defines the product images dimensions having Width X Height in pixels.

The photos of your item that you upload to products will be resized to match the values you have input here. If your settings are 100×100 pixels and you upload a photo of 300×600 pixels image it will be resized to 100×200 pixels. You can also choose to ‘hard crop’ option to crop your images which will force them to be the size specified in these settings.

Find a theme’s product image dimensions

The theme you selected determines what will be the maximum size of a picture. So, you have to know the measurements in which it renders them to set those in WooCommerce.

Catalog Images

For catalog images, you have to enable the developer tools in your browser. Then you can right-click on the picture and select “Review” or “Assess Element”. This will show you the picture measurements. Mark this as we will need to use them later.

In Storefront (above), the biggest inventory pictures are rendered at 213 x 213 pixels.

Single Product Image

Repeat the procedure for the single item picture — the biggest picture on an item page of the store.

In Storefront, the biggest Single Product Image is rendered at 298 x 298 pixels.

Product Thumbnail

The smallest picture is likely the thumbnail in the product display. Repeat the inspection procedure to get the measurements.

In the Storefront theme, it renders at 43 x 43 pixels.

Alter picture measurements and recover thumbnails

Since all thumbnail picture sizes for our specific themes are known, we can add these new dimensions to WooCommerce to make sure that future picture sizes will be this size or bigger.

Navigate WooCommerce > Settings > Products > Display, be sure that the maximum picture sizes are at least as large as the measurements your subject is rendering for those thumbnails. After that, click on Save Changes.

Any new product images that are uploaded will now have thumbnails under these settings, and should appear without distortion or blurriness.

Related Article: Fixing Blurry Product Images

You may also like: Update WooCommerce in Right way.