How to optimize WooCommerce product image size

Reading Time: 9 minutes

As an ecommerce merchant, you should be aware that WooCommerce product image size plays an important role in how your entire online store performs. 

If not optimized, image file sizes are usually larger than necessary, requiring more bandwidth to transfer from your server to the user’s device. That alone slows down the page loading time, prompting visitors to leave the site, but did you know that it can also result in increased hosting costs and even potential SEO issues, ranking you lower in the search results?

The good news is that optimizing images for WooCommerce is simple. A few techniques to get you on the right track include:

• Resizing images before uploading
• Using appropriate file formats
• Compressing images
• Implementing lazy loading
• Using a Content Delivery Network

We’ll look at these steps below with additional insight into the best image sizes for WooCommerce products.

Let’s get started.

High-resolution images with correct dimensions

Adding images in different sizes often leads to blurred or stretched images. 

And guess what?

Unclear, grainy, blurred, or discolored images shot in poor lighting are a big customer turn-off and one of the biggest mistakes that can lead to poor sales.

You should add images in the correct dimensions for your online store because it boosts the quality of your image and might play a major role in driving conversions.

So, what’s the best WooCommerce product image size?

What should the exact WooCommerce product image size be?

The best WooCommerce image sizes are dependent on several things, like:

• Store user interface
• The WooCommerce theme used
• The type of image zoom plugin the store uses 

Typically, the minimum resolution you should aim for with your WooCommerce product images is 800px x 800px. The maximum recommended resolution should be no higher than 1000px x 1000px.

However, for better quality, you should aim as high as possible. 

For example, the above dimensions are suitable for adding standard Woocommerce products, while complicated and detailed products might require larger images — probably 2000 pixels and above — to allow customers to zoom in on even the more minor details.

Note how you can edit the dimensions of your product images in WooCommerce:

There are several types of images for WooCommerce, each with its own optimal size. These include:

Thumbnail image

A thumbnail image is a smaller version of a larger image, often used as a placeholder to represent the full-sized version. Thumbnails are square, cropped, and suitable for product galleries, shopping carts, and widgets.

By default, a WooCommerce thumbnail is set to 600 pixels wide. However, the store owner can customize it depending on usage.

Similarly, by default, the gallery thumbnail is set to 100 pixels x 100 pixels.

Take a look at these thumbnails from Etsy. They are small yet clear enough to entice visitors to click and explore the full product pages.

Single product images

Single product images refer to main or featured photos. They are likely the largest images and are used when you’re creating a WooCommerce product listing. 

The single product images shouldn’t be cropped and must have a minimum width of 600 pixels.

For instance, note how the below Target product image is large:

Catalog images

Catalog images are usually medium-sized images suitable for exclusive product page loops. These include the likes of Related Products, Shop, and Product Category pages, where images are typically a few hundred pixels.

For instance, note how the catalog images on Walmart are small yet clear:

Adjust the photo Level

Another way to achieve the best WooCommerce product image size is to adjust the photo Level using various image editing tools and programs. 

All you need are platforms like Adobe Lightroom, Photoshop, Affinity Photo, Procreate, or similar software. With these tools, you can easily adjust the lighting Levels of your images.

But what are Levels, after all? Levels allow you to manipulate the histogram of your photo so you can adjust the mid-tone and light and dark points as you wish. Tuning the midpoints means you can remove excess image light, add contrast, and improve saturation.

Here’s an example of an image and its histogram:

Don’t let these huge terms diminish your hope of adjusting photos for your WooCommerce gallery. You can perform all the above mentioned actions with basic image editing skills or hire someone to do it for you. 

Even if you have limited access to premium photo-editing suites like Lightroom, you can search the internet for similar image-editing tools like Adobe Spark or Pixlr.

A tip: Keep the image background as simple as possible while adjusting images for your WooCommerce product gallery. It’ll help your customer see the image clearly, as your product will be highlighted. It also lowers the amount of information in the photo, which reduces image file sizes.

Fewer colors mean smaller file sizes. Ideally, use a plain white background like the one used by Amazon. This helps achieve the objective without compromising image clarity.

Note how the below images on Amazon have transparent backgrounds, reducing their size while maintaining quality. You can use a tool like VistaCreate to remove the background from the photo.

Display many viewpoints for WooCommerce product images

Product images can positively or negatively impact your potential customers. You need them to captivate and convert your page visitors into buyers. 

Therefore, it’s important to show the product that customers are looking to buy from a holistic perspective.

This means creating WooCommerce product images that showcase the product from multiple viewpoints and angles. 

These viewpoints are crucial since the customer can’t pick up and examine the products as they would in an offline store.

A holistic perspective is especially significant for items traditionally sold face-to-face, such as shoes, clothing, and foodstuffs. 

Here’s an illustration:

How to change the product image in WooCommerce

Multiple images of the same product displayed in a user-friendly way are essential to giving the customer a holistic view.

To add extra WooCommerce product images to your products that already have some, open the product page in WordPress and add them.

If you have a huge collection of images for the same product, you can easily upload the whole catalog via CSV. WooCommerce has a built-in CSV importing feature.

Go to Products > All Products > Select your product > Add product gallery images.

The CSV works in conjunction with a publicly accessible URL. An excellent choice is to upload the images to Dropbox and copy the public address of the image file, which you will then upload into your CSV.

The latest WooCommerce versions have a new feature that allows users to zoom in on an image when hovering. This is​​ a great feature, especially if you’ve added higher-definition images. It will help potential customers see the item on sale with finer details.

You could also give a 360º view of your product by leveraging a plugin like SR Product 360º View. This would provide an even better product viewing experience.

Load speed optimization for WooCommerce product images

In a world where people are always pressed for time, it’s vital to ensure you deliver whatever the prospective customers want as early as possible.

Did you know that for every additional second your website takes to load, your conversion rate drops by 17%? This can have a drastic impact on your sales and revenue.

Images, among the heaviest elements on a page, can play a major role in dictating the experience here. 

Thus, configuring the WooCommerce image size settings is extremely important. By learning how to optimize images, you’ll be a step closer to improving your site’s loading speed.

You do this by:

• Compressing images
• Converting images to a different format
• Setting up a content delivery network (CDN)

Let’s dig deeper.

Compress images

Compression is one of the best ways of optimizing images for your WooCommerce product gallery, as it reduces the size of the images without necessarily altering their dimensions.

The two main types of compression include:

• Lossless compression: Reduces the file size of an image on a small scale so that the change in quality is not visible to the naked eye
• Lossy compression: Reduces file size in huge chunks, which will sometimes change the quality of the image

Often, you cannot tell the difference between lossless and lossy compression, especially if you’ve used a less aggressive algorithm when altering the image size.

To achieve the best WooCommerce product image size, you should use compression when editing your pictures. This is an easy hack that reduces the image file size without changing anything else.

Quick tip: Never upload images with huge file sizes because they will slow down your website and negatively affect your conversion rate. Compress the images using tools like JPEG Optimizer, TinyPNG, and Compressnow.

You can also use WordPress plugins to compress product images directly during the upload process, making it a convenient way to optimize your images automatically.

Convert images to a different format

The loading speed of your ecommerce store largely depends on its weight and the size of the image files uploaded. Converting the image into different file formats can greatly reduce your product image size. This, in turn, can speed up your website with ease.

The common formats used in online images include PNG and JPEG.

JPEG format is great for reducing WooCommerce image sizes because the images are smaller and easier to compress than PNG files. They also support lots of colors and are often used by big ecommerce stores like Walmart and Amazon.

However, JPEGs don’t support transparency. Hence, you might be forced to use PNG if you want to add transparency to your images.

Additionally, AVIF and WebP are the newest formats in town. They’ve become an instant sensation thanks to the impressive file size reduction they offer. 

Surprisingly, they can reduce up to over half of your page weight without compromising quality. This makes them perfect successors to the standard PNG and JPEG images.

What’s more?

You can easily integrate them into your WordPress, and they’ll work seamlessly.

Configuring and using WebP is a walk in the park on WordPress. You can install a plugin like WebP Converter for Media. Once it’s installed, all you need to do is sit and relax. 

The plugin works automatically, converting all the images on the website to WebP. This way, you receive new and lighter photos than the previous ones.

Set up a content delivery network (CDN)

CDNs, also known as content distribution networks, are a group of servers in different geographical locations. They are often used together with reverse proxies to optimize content delivery by acting as intermediaries between the client requesting a resource and you, the provider.

CDNs are internet servers distributed all over the globe by intermediary companies. As they’re nearer to the visitors than your server, they can speed up the delivery of your content and increase your page loading speed. Examples of these intermediaries include KeyCDN, MaxCDN, and Cloudflare.

CDNs help deliver media like videos and images to the client faster without overloading your server. 

And guess what?

The best part about CDNs is that these intermediary server companies can handle multiple file requests in a matter of seconds. Within this timeframe, they deliver photos in your WooCommerce product gallery to the client using their robust network. 

Summary

Optimizing image sizes is crucial for your WooCommerce store, as these visual elements are pivotal in showcasing and selling products effectively.

Thankfully, you can optimize images by:

• Choosing the best format: JPEGs for most product photos, PNGs for logos and transparency
• Embracing next-gen formats: Convert images to AVIF and WebP for superior compression and quality
• Resizing before uploading: Determine your theme’s image dimensions (check the theme documentation or WooCommerce settings) and use free tools to crop and resize images
• Compressing ruthlessly: Use bulk compression tools like Smush to quickly compress galleries and online tools like TinyPNG for single images
• Serving images over a CDN: Cloudflare and other CDNs automatically optimize and serve your images from global data centers to improve load times

Strive for the smallest possible image file sizes while maintaining quality to significantly boost your store’s speed and transform more browsers into buyers.