How to optimize WooCommerce product image size

Are your product photos on WooCommerce loading slowly or looking blurry on some screens? You’re not alone. In many cases, the problem is using the wrong WooCommerce product image size, which affects how your images appear and how quickly they load.

Large images can slow down your site, while small ones can make your products look unclear and unprofessional. These issues could lead to lower search engine rankings and a poor user experience.

This is why optimizing your WooCommerce product image size is essential. When you fix your image sizes, you improve your site’s loading speed, enhance search visibility, and create a better shopping experience.

In this guide, you’ll learn how to optimize WooCommerce product image sizes, compress files, and fix common issues. 

Why WooCommerce product images matter

Product images in WooCommerce can directly impact performance and sales. Large, unoptimized images can slow down your site, leading to higher bounce rates. 

The probability of a visitor leaving your site increases significantly if the page takes too long to load. This is why Google has prioritized page load speed as a crucial ranking factor.

According to Bidnamic, conversion rates increase by 17% for each additional second that a website takes to load. 

Product images are also the Largest Contentful Paint (LCP) element on your ecommerce site pages. LCP is part of Google’s Core Web Vitals metrics that monitor how fast your content loads. If your WooCommerce product image size is too large or unoptimized, your LCP time increases. This can hurt both SEO rankings and user experience.

Optimized images also improve the mobile experience. Since most people browse on mobile devices, Google ranks websites based on mobile-first indexing. This means that oversized images can negatively affect your mobile performance, potentially lowering your search rankings.

You see, product visuals often serve as the final convincing factor for customers. They get to see different angles of the product and the details of the ingredients or materials used.

WooCommerce product image size optimization contributes to faster load times and better search visibility.

Additionally, good images keep the customers scrolling longer and reduce shopping cart abandonment. This is why you need to use the best image size for WooCommerce products across your site.

Recommended WooCommerce product image sizes (by type)

When you don’t apply uniformity across your WooCommerce product image sizes, you end up with inconsistent images.

That can negatively affect user experience and result in poor sales. This brings us to the next important question: What are the recommended WooCommerce image sizes?

The best WooCommerce product image sizes depend on the following factors: 

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

Typically, the minimum resolution for WooCommerce product images is 800 x 800 pixels. However, for better quality, you should aim as high as possible when setting your WooCommerce product image size. 

For example, the dimensions stated above are suitable for adding standard WooCommerce products. Complex and detailed products might require larger images, ideally 1,200 x 2,000 pixels and above. 

This allows customers to zoom in on even the most minor details. Larger original images also maintain their quality even after WooCommerce resizes them. 

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. Here’s a table showing the recommended image sizes for WooCommerce online stores:

Most modern WooCommerce themes now suggest uploading images between 1,200px long and 2,000px wide. This supports high-resolution retina displays and zoom features. WooCommerce will then automatically resize these images for different uses, such as thumbnails and catalog views.

Let’s explore these WooCommerce product image sizes in more detail and understand their purpose.

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 size is set to 300 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.

WooCommerce automatically generates thumbnails from your original image. So, if you upload a high-resolution image, your resized thumbnails will look sharper.

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 the main or featured photos. They are likely the largest images and are used when you’re creating a WooCommerce product listing. 

For most modern themes, the WooCommerce product image size for single images should be at least 1,200px wide. This ensures good quality, especially if your store uses zoom or high-resolution screens.

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:

How to set product image sizes in WooCommerce

You can set and manage WooCommerce product image size from within the WooCommerce platform. You can either do it manually or use a plugin to automate the process.

In updated WooCommerce versions, image sizing is mainly handled through your theme settings. You can also set WooCommerce product image sizes under Appearance > Customize > WooCommerce > Product Images.

Here’s how you can set WooCommerce product image size manually:

• Go to the customizer: Click on your WordPress admin panel, and navigate to Appearance> Customize
• Find WooCommerce settings: Within the customizer, locate the WooCommerce section
• Select product images: Click on the product images option to open image settings
• Make adjustments: You can now crop your images to your specific needs using the following cropping options:

• 1:1 – Crop images into a square
• Custom – Crop images to a custom aspect ratio
• Uncropped – Allows you to maintain the original aspect ratios of the original image 
• Publish changes: Once you’re satisfied with the changes, click on the publish button to save your WooCommerce product image size settings

After changing your image sizes, install and run the Regenerate Thumbnails plugin. This updates all your existing images to match your new WooCommerce product image size settings.

The second option is to use a plugin like WooThumbs for WooCommerce. Here are the steps you can follow to adjust your WooCommerce product image size:

• Install the plugin: From your WordPress dashboard, hover over the plugin button and click on Add plugin, and type WooThumbs into the search bar
• Open WooThumbs: Go to WooCommerce > WooThumbs > Display, then scroll down to the image sizes section
• Add your sizes: Add your desired WooCommerce product image size in the single image width (px) section
• Save: Click on save to launch background image regeneration for all your images. That’s it!

How to regenerate WooCommerce product images

Many ecommerce store owners change their WooCommerce product image size settings, but don’t see any changes. This happens because the platform doesn’t automatically update old images.

When you upload an image in WooCommerce, it creates several versions of that image. These include thumbnails, catalog images, and full-size images. The platform saves these images based on your image size settings at that time.

If you later change your settings, WooCommerce doesn’t go back and update existing images. It only applies the new rules to new uploads. This explains why your old photos don’t match your new WooCommerce product image size settings. 

To fix this, you need to regenerate your thumbnails. This simply means you must command WooCommerce to recreate all existing and new image sizes using your new settings. The easiest way to do this is with a free plugin called Regenerate Thumbnails.

Here’s how to regenerate WooCommerce product images:

• Install the plugin: In your WordPress dashboard, click on Plugins > Add New, and search for Regenerate Thumbnails; then, install and activate it
• Start the process: Navigate to Tools > Regenerate Thumbnails
• Run the tool: Click on Regenerate Thumbnails For All Attachments

• Clear your cache: If you use a caching plugin like WP Rocket or a service like Cloudflare, clear your cache to see the changes

Once the process is complete, all product images should match the new sizes across your WooCommerce store.

How themes and builders affect product image display

You need to pay attention to WooCommerce themes and page builders when deciding on the WooCommerce product image size for your store. Themes and page builders directly shape how your product images look and load. 

If your images appear blurry, stretched, or improperly cropped, the issue is likely not with the image itself, but rather with how your theme or page builder is displaying them.

Some WooCommerce themes, such as Storefront, Astra, or Flatsome, define their own custom image dimensions. These settings often override WooCommerce’s default image sizes. 

So even if you upload high-quality images, the theme might force them into fixed boxes or crop them unexpectedly.

Page builders like Elementor or WPBakery have a significantly bigger impact on image appearance. Their image widgets or modules can control how images render on the front end, sometimes applying custom CSS or resizing rules. 

This can create conflicts or visual bugs if the builder’s image settings don’t match your theme’s layout. 

To fix all these image issues, check both the theme and builder documentation for hooks or filters related to WooCommerce product image size. Here’s how a theme documentation usually looks:

Common issues with WooCommerce image sizes (and fixes)

If you own a WooCommerce store, you may have experienced blurry photos, slow load times, and uneven grids. These image-related issues are more common than you think, but easy to fix.

1. Blurry Images

Blurry images often occur when low-resolution files are stretched to fit larger display boxes. Doing so makes it difficult for customers to see product details clearly, which can negatively impact conversions.

Solution:

• Upload high-quality images that are at least 1200px wide, with the product centered
• Adjust the image dimensions to match your theme settings by navigating Appearance > Customize > WooCommerce > Product Images

2. Uneven layout

If some images are square, while others are wide or tall, your shop grid will appear messy. This happens when product photos have inconsistent aspect ratios.

Solution:

• Crop product images to a consistent ratio, like 1:1, before uploading
• Enable the hard crop setting via: Appearance > Customize > WooCommerce > Product Images

3. Large file sizes

High-resolution images can slow down your website speed if the files are too large. Uploading raw images directly from the source increases page load times.

Solution:

• Compress images using tools like TinyPNG to reduce file size without sacrificing quality
• Use the JPEG format over PNG, as it’s lighter and loads faster, and, if your theme supports it, set limits on image upload dimensions

4. Images loading slowly

Sometimes, your images may look fine, but they still load slowly. This usually happens when you use very large WooCommerce product image sizes or don’t compress your files. 

It may also occur if you’re not using a content delivery network (CDN). A CDN stores your images on servers around the world, improving load times for customers in different locations.

Solution: 

• Compress all your images before uploading to reduce file size without affecting quality
• Enable lazy loading so images load only when customers scroll down
• Use a CDN like Cloudflare, Bunny, or Jetpack CDN to deliver images faster across locations

A bonus tip to keep in mind is to regenerate thumbnails after changing WooCommerce product image size settings. A plugin like Regenerate Thumbnails can automatically handle this for you.

How to optimize WooCommerce images before uploading

Image optimization adds more to your store than just reducing WooCommerce product image size. It ensures your visuals are sharp, uniform, and load smoothly, which is key to a seamless shopping experience.

You can optimize images for WooCommerce in three ways:

Compress images

Compression is one of the best ways of optimizing images for your WooCommerce product gallery. 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.

Choose the best file 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.

The JPEG format is great for reducing WooCommerce product 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.

Add alt text during upload

Adding alt text during upload helps search engines understand your product images. It also improves accessibility for readers and is a great SEO practice. 

When done correctly, including alt text can drive traffic to your store. Well-written alt text should describe exactly what’s in the image and include context, without stuffing keywords. 

For example, if you’re selling shoes, use black-leather-chelsea-boots-side-view instead of IMG_9484.jpg.

Accurate alt text descriptions, such as “black leather Chelsea boots,” align closely with what customers are searching for. This leads to higher search rankings and keeps your site’s layout clean and loading fast.

Advanced WooCommerce image optimization tips

If your WooCommerce still feels slow, despite making all the changes we’ve discussed, then it’s time to try advanced fixes. 

For starters, if your ecommerce store has a large catalog or gets visitors across the world, consider using a CDN. It stores copies of your images on servers around the globe. This helps your images load faster, no matter where your customers are. When someone visits your store, images load from the server closest to them.

Here are more strategies you can try out.

Use lazy loading

Lazy loading holds off on loading images until they’re about to be seen. Instead of forcing a browser to load every single image upfront, it only loads what’s visible on the screen.

As a shopper scrolls, more images load in. This reduces initial page load time, alleviates server strain, and makes your store feel faster.

This is helpful if your WooCommerce product image size is large or you’ve got lots of images on a single page. Faster pages mean better SEO and fewer abandoned carts.

Enable WebP or AVIF support

Old formats like JPEG and PNG aren’t built for performance. WebP and AVIF offer way better WooCommerce product image size compression, which means faster loading without a noticeable drop in quality. 

That’s important for WooCommerce stores, where you need clear, detailed photos that don’t slow down your site. WebP is supported by most browsers and works seamlessly with WooCommerce. AVIF, on the other hand, offers even smaller file sizes.

Fortunately, many image optimization plugins can automatically convert uploads into these formats while preserving the original WooCommerce product image size. This allows you to save bandwidth and speed things up without touching your layout.

Legal considerations for product photos

It might be tempting to use images found online, but avoid doing so. Using unlicensed images can result in copyright violations, takedown notices, and potentially costly legal problems. Always stick to licensed images, manufacturer-supplied photos, or ones you’ve taken yourself.

Sticking to approved content protects your store legally and ensures you’re showcasing the correct WooCommerce product image size and branding.

Make every pixel count

As you can see from what we’ve discussed, optimizing WooCommerce product image size for your store is highly recommended. You can do it manually or use a plugin like WooThumbs for WooCommerce.

Well-optimized images reduce loading times and keep visitors on your site longer. Both of these increase the chances of making a sale. Therefore, start paying attention to the sizes of images you add to your online WooCommerce store.

Optimize them by compressing them without losing quality, adding alt text before uploading, and using formats like AVIF and WebP. Implement these tips today and see how your WooCommerce store performs. 

WooCommerce product image FAQ