How to Customize WooCommerce Product Image Size?

Images are one of the most critical parts of any online store. But there are many different types of WooCommerce product images. And it is not always easy to figure out where you can change them to suit your specific needs.

Since WooCommerce image sizes can be a little complicated, we have created this guide to look at each of the fundamental aspects. 

First, let’s see why customizing WooCommerce product image size is important. Then, we will learn how to do it.

What are The Benefits of Sizing Your WooCommerce Product Images?

When you set the WooCommerce image sizes, there are two main benefits you will get:

No Image Blur

Adding product images in a different size than that allowed by the theme often results in blurry photos. This visual blur, if not corrected, can cause potential customers to leave your store without buying anything.

High Website Speed and Performance 

The images on your website are one of the main factors that determine the website’s speed and performance. 

The larger the image, the longer your online store takes to load. This often leads to lower revenue and more unhappy customers.

Streamline the Process of Sizing WooCommerce Product Images

Setting size standards for your WooCommerce product images also helps streamline the sizing process. You do not need to guess exactly how big your product images need to be each time uploading new ones.

Now, let’s find out what the best WooCommerce product image sizes are.

What is the Best Image Size for WooCommerce Products?

The best size for WooCommerce product images largely depends on the products you are selling and the theme you are using for your store.

For example, you should use an image size that is 800px – 1000px wide if you are selling simple products like plain t-shirts.

However, if you have detailed or complex products, uploading a larger image will allow potential customers to zoom in and see those details up close. In that case, images with 2000px width may work better for you.

Note: Never upload images that are too large. Oversized ones will slow down your site and, as a result, will probably affect sales.

How Many Different Types of WooCommerce Product Images?

Before moving on to product image editing, let’s look at the WooCommerce product image types first. There are 3 types of product images in WooCommerce.

Single Product Images

This is the largest image type. It refers to the featured image (main image) on product detail pages. 

The minimum size for this type should be 800 × 800 pixels. The maximum can be any size. However, keep in mind that the larger the images, the slower your site will be.

Product Thumbnail Images

These are the smallest images used in product gallery thumbnails below the single product Image, shopping carts, and widgets.

Catalog Images

These are mid-sized images that appear in product loops, such as product category pages, shop pages, related product sections, upsell/cross-sell sections, etc. 

However, in WooCommerce 3.3 and above, they have been removed. Instead, WooCommerce category image size and WooCommerce shop page image size now use the same settings as the thumbnails’.

How to Customize WooCommerce Product Image Size?

From WooCommerce version 3.3, the developers have introduced a new and easier way to make all WooCommerce product images the same size. Also, you do not need to regenerate the image after customization.

Change WooCommerce Thumbnail Size and Main Image Size

1. Image sizes can now be configured in WordPress Customizer. Go to Appearance > Customize > WooCommerce > Product Images.

2. Here you can set the WooCommerce thumbnail size and main image size. Type in the numbers you want. 

After you make changes to these settings, WooCommerce will generate new images with the new sizes automatically. This may take some time to process. However, it runs in the background.

Image heights have been intentionally removed as they are automatically calculated based on the image widths. 

Setting up the Cropping Feature for the Thumbnails

In the same window, you can customize the thumbnail heights by setting up the cropping feature. There are three options you can choose from:

• 1:1: When this option is selected, the height of the images will be the same as the widths.
• Custom: This selection allows you to choose from different aspect ratios for the images, like 1:1, 5:4, 4:3, 3:2.
• Uncropped: Select this option if you do not want to resize the images. WooCommerce will render the images in their original aspect ratio.

Single product images no longer have any cropping setting. They always show uncropped.

Check the Status of the Background Process

1. If you want to see the status of the background reconstruction, from the admin panel, go to WooCommerce > Status > Logs.

2. After that, select the log from the dropdown that starts with ‘wc-image-regeneration’.

Why the ‘Thumbnail Width’ and ‘Main Image Width’ Fields are Sometimes Missing? 

You might see that the ‘Main image width’ and ‘Thumbnail width’ fields are missing from WordPress Customizer.

Not to worry! These settings will be removed from the WordPress Customizer if your theme has been declared WooCommerce support and predefined WooCommerce image size settings.

WooCommerce comes with some theme support declarations. This means that they have set the best image sizes for your theme.

But often, you will find these settings elsewhere in the admin area, like in the theme settings inside Customizer or the theme’s settings page. 

If not, your theme is probably really strict about the image sizes it uses and does not allow them to be changed easily. If you are in doubt, contact the theme developers or use their support system to double-check.

In this case, you need to modify or remove the parameters defined in the Functions.php file to change WooCommerce product image sizes. 

If you do not know how to make changes at the code level, hire a developer to help you or use a different theme. 

Therefore, you should check if a theme allows you to edit these things in WordPress Customizer before deciding to use it for the long term. In this case, you can try Woostify free WooCommerce theme. This theme is completely built for online shop and allows you to custom all WooCommerce image sizes.

How to Optimize Images if They Slow Down Your Website?

The final part is to focus on optimizing images to reduce loading speed. Nowadays, there are so many different devices and connection speeds. That is why image optimization is more critical than ever.

Make Sure Your Images are not Too Large

While you do not want to use images below 800px × 800px, you also do not want to do it the other way around. Uploading images that are too large will slow down your website.

Optimize Images

First and foremost, optimizing images means reducing file sizes as much as possible while keeping the highest possible image quality.

With Photoshop, you can save images at 80% quality, and they will still be usable. Additionally, you may need to consider using another tool to remove excess data from your image files and compress them further.

For this, I recommend using a free WordPress plugin called Smush. It removes redundant image data, resizes images to a suitable size, and then compresses them before saving them back to the media library.

Use a More Efficient Image Format

Besides optimizing, converting your images into a different file format can also play a crucial role in reducing the product image file sizes. As a result, your site speeds will be faster.

Typical formats used in online images include PNG and JPEG. 

The JPEG format is excellent for reducing the size of WooCommerce product images, as it is smaller and more effortless to compress than PNG. It also supports a lot of colors and is commonly used by major eCommerce stores like Walmart and Amazon. One useful tool is the HEIC to JPEG converter, which can convert images from the HEIC format used by newer iPhones to the more widely compatible JPEG format.

However, JPEG does not support transparency. Therefore, you need to use PNG if you want to have transparency in your product images.

AVIF and WebP are the newest formats in town. They became an instant hit thanks to the incredible file size reduction they offer.

Surprisingly, they can reduce image file sizes by more than half without compromising quality. This makes them the perfect successors to the standard PNG and JPEG formats.

You can easily use WebP formats in your WooCommerce store. All you need to do is to install a plugin like WebP Converter for Media. And it will take care of the rest for you.

Serve Your Media Assets from a CDN

CDNs are optimized to deliver static content such as images. When using one, the visitors’ browser requests the image file from it instead of overloading your server.

These are set up specially to handle millions of file requests efficiently. Through their robust network, you can distribute the images to your visitors extremely quickly while offloading your servers.

There are several excellent CDN services you can use:

• Cloudflare
• MaxCDN
• KeyCDN

Some Common Problems Related to WooCommerce Product Image Size 

WooCommerce Product Image Size Too Big

This is often because you set the image sizes too big. Follow our guides above to reset them, and the problem should be resolved.

WooCommerce Product Images Different Sizes

If your product images show up in different sizes in your WooCommerce store, there are a few things you can do:

• Before uploading your product images, make sure all of them are the same size. Our recommendation is to create a template with an image editor that you can use for any product image. 
• Make sure you have adjusted your WooCommerce product image settings, including WooCommerce product thumbnail size and cropping.

WooCommerce Product Image Blurry

If your WooCommerce product images are blurry, you need to check a few things:

• Is your image quality good from the start? Check the quality of your product images. If it is low, when added to your WooCommerce store, it will not look as sharp and clear as you want.
• Check your thumbnail settings. For example, you want 800px images for your product pages and 200px images for your category pages. However, you only uploaded 200px images. In this case, WooCommerce will automatically enlarge them, causing the images to appear larger and blurred.

Add WooCommerce Photo Reviews to Increase Trust

Allowing customers to upload product images is a great way to provide social proof to new customers. This also creates new content for your products/services. 

You can use a WooCommerce testimonial plugin like Ryviu to create a modern and professional WooCommerce testimonial section with photo review capabilities.

If customers’ images are genuine, you can use them as your product images and for social media marketing or other marketing channels.

Display Various Viewpoints with WooCommerce Product Images

Product images can have a positive or negative impact on your potential customers. You need them to attract and convert your site visitors into buyers.

Therefore, it is crucial to show your products from different perspectives and angles. This is important because customers cannot select and inspect products on your WooCommerce store as they would in a physical store. 

Providing various viewpoints is especially significant for items that are traditionally sold directly, such as shoes, clothing, and food.

Below is a good example:

Final Words

In this tutorial, you have learned how to manage WooCommerce product image size. 

We already explained how to change WooCommerce thumbnail size and main image size. We also came up with solutions to some of the common issues you might encounter.

We all know how critical product images are to sales in your online store, so always make sure your product images are working well.