How to Change WooCommerce Product Image Size Easily

Is your WooCommerce store struggling with slow page loads, declining visitor numbers, and sluggish conversions? The culprit might be hiding in plain sight: your product images, especially your WooCommerce thumbnail sizes.

Oversized or inconsistent product images can wreak havoc on your site’s performance. But here’s the catch: you still need high-quality visuals to showcase your products effectively. So, how do you strike the perfect balance?

That’s exactly what we’ll explore in this comprehensive guide, including time-saving tools to streamline your image optimization process. 

Let’s dive in!

Default WooCommerce product image sizes

WooCommerce automatically sets default image sizes when you upload product images to ensure consistency across your websites.

Here are the key default image sizes WooCommerce automatically sets:

Image type	Default size (Pixels)	Usage
Thumbnail	100 x 100	Product lists and galleries
Single product	800 x 800	Individual product pages
Catalog	300 x 300	Main shop and category pages

If your theme is responsive, these defaults may be adjusted to suit its design better. You can view the recommended sizes for your store by checking the information icons next to the ‘Set product image’ and ‘Add product gallery images’ options in the product editor.

Best WooCommerce product image sizes and formats

The right image sizes and formats can significantly impact your store’s load times, user experience, and even search engine rankings. Let’s explore how to choose the best sizes for different types of product images and which file formats to use for optimal results.

1. Choosing the best sizes for your product images

While WooCommerce provides default image sizes, optimizing these for your specific needs can enhance your store’s performance and appearance. 

Here are recommendations for each image type:

Image type	Minimum optimal size (Pixels)	Maximum optimal size (Pixels)	Notes
Thumbnail	100 x 100	150 x 150	Larger sizes may impact load times without offering real value
Single product	800 x 800	1500 x 1500	Choose larger sizes for high-quality products or zoom functionality
Catalog	300 x 300	400 x 400	Choose larger sizes for themes with prominent catalog images

Remember to test your chosen sizes on various devices to ensure they display well and load quickly across all screen sizes.

2. Understanding aspect ratio

Aspect ratio refers to the proportional relationship between an image’s width and height. Maintaining a consistent aspect ratio across your product images ensures a uniform look throughout your store. 

For WooCommerce product images, a 1:1 (square) ratio is often preferred as it works well in various layouts and grid systems. However, depending on your products and theme design, you might also consider 3:4 (portrait) or 4:3 (landscape) ratios. 

3. Selecting the right image format

The format of your product images can significantly impact both quality and load times. Here are the most common formats for WooCommerce product images, and for which type of images they are best for:

Format	Best for	Pros	Cons
JPEG (JPG)	Photographs, images with many colors	Good compression, balance of qualit, and file size	No transparency support
PNG	Images needing transparency, sharp edges, text	Lossless compression, transparency support	Larger file sizes
WebP	Modern browsers, all types of images	Superior compression maintains quality	Not supported by older browsers

For most WooCommerce stores, JPEG is the go-to format for product images due to its balance of quality and file size. Use PNG when you need transparency or for graphics with text. If your host and theme support it, consider converting your images to WebP for the best performance.

How to resize WooCommerce product images

Method 1: Change the Built-In WooCommerce Image Settings

When you add product images to WooCommerce (featured images or gallery images) from the media library, you can override the default height and width. This is an easy “fix” for eCommerce store owners who want to upload larger images and have them display better on the front end, but it’s not the best approach as your images will not be properly optimized; they will only be resized. This means that they could still slow down your website.

Method 2: Override the Default Image Sizes with Custom Code

This method applies to store owners who like their theme but want to override its default image sizes. This method is only recommended if you have technical knowledge or can work with an experienced developer who knows what they’re doing.

You can do this by editing your theme’s functions.php file (always work in the child theme). You can additionally use CSS and add a code to your stylesheet, which ensures that product images are always displayed at their original aspect ratio and won’t be stretched or distorted.

Method 3: Use Photo Editing Software

Photo editing software, like Adobe Photoshop or GIMP, can be used to manually adjust and optimize product image sizes before uploading them to your site. This is a good route to go for any eCommerce store owner, as it’s the best way to ensure that your images are the exact size they should be.

If you’re selling products, it’s in your best interest that they look great on your website and, although learning how to use editing software to make various improvements to your images requires a small learning curve, it’s well worth it (if you only want to adjust images’ size before uploading them, the learning curve will be minimal).

One query we often get from WooCommerce users is how to get around the awkward cropping of product images, where sometimes the top and bottom of a product are cropped off. 

You can make WooCommerce images uncropped by going to Appearance > Customize > WooCommerce > Product Images > check Uncropped, but you’ll find this only gives you the original sizes of uploaded images. 

You still need to scale them down proportionally. To do this, you would open the photo editing software you’re using, give it a square canvas (say, 800 x 800), then place the product image in the middle of the canvas with enough space around it, save the file and only then upload the product image to your media library.

Method 4: Customizing Your Product Image Sizes with Plugins

There are various WordPress plugins available to help you customize and optimize your product image sizes, automating the process and giving you additional benefits.

The best reason to use a plugin would be to display custom product images anywhere on your website, whether that’s on your homepage, landing page, or other pages. You can find plugins that can help you display products in custom image galleries, sliding banners, and more. There are also plugins that can automatically handle image optimization for you.

Gallery plugins, in particular, are great because they give you the functionality to display your product images however you want them to (e.g., in a masonry gallery or with special transition effects).

One such plugin is FooGallery PRO Commerce, an easy-to-use WordPress image gallery plugin with a focus on performance and SEO. It is also responsive, retina-ready, and supports lazy loading. Best of all, while it’s not a WooCommerce plugin, it is engineered to integrate directly with your WooCommerce products’ data source, letting you create customized, shoppable product galleries that you can put anywhere on your website.

---

In order for FooGallery PRO to automatically adjust product image sizes for you, here’s all you need to do:

• Create a new gallery and select the product gallery template.
• Set the thumbnail size, which will then be applied to all images within the gallery. If you have multiple galleries on your site, you can dictate different thumbnail sizes for each of them. Obviously, for galleries with lots of images, opt for smaller thumbnails!

• You can also choose to crop the thumbnail to exact dimensions. Or, with FooGallery PRO Expert, you can use a handy feature called Thumbnail Fill, where images are not cropped to fit your thumbs, and the remaining space is instead filled with a color of your choice. This allows you to display the entire image while having a uniform thumbnail size.

You can also customize further by adding CTA buttons and sales ribbons to images, and various other handy eCommerce features to encourage visitors to shop directly through the product gallery, which integrates seamlessly with WooCommerce. The gallery template also offers support for product variations and there are various other handy eCommerce features built in. 

Advanced optimizations for WooCommerce product images 

In addition to adjusting image size, there are other things you can do to optimize your product images for SEO and better site performance.

1. Load speed optimization

Slow-loading product images can significantly impact user experience, leading to higher bounce rates and potentially lost sales. Search engines like Google also consider page speed as a ranking factor, meaning faster-loading images can contribute to better SEO performance.

The following techniques focus on reducing image file sizes without compromising visual quality, ensuring your product images load quickly across all devices and network conditions.

Image compression

Compressing product images reduces their file size without compromising image quality. There are several image compression tools you can use to optimize your product pics before you upload images to your WordPress/WooCommerce site. For some of them, like TinyImage, there are helpful tutorials. Image compression is a best practice for any online store owner, especially for your large single-product images.

Image format

Choosing the right image format also helps to optimize product images. JPEG is the most used image format for single-product images because it retains image quality while keeping file sizes relatively small. PNG is another option, but it tends to have larger file sizes.

Setting up CDN

A Content Delivery Network (CDN) can significantly improve your site’s loading speed, especially for users located far from your server. A CDN stores copies of your images on multiple servers worldwide, delivering them from the nearest location to each user. This reduces latency and speeds up image loading times. Popular CDN services for WordPress include Cloudflare, StackPath, and BunnyCDN.

2. Image naming and alt tags

Using descriptive file names and alt tags for your product images improves their SEO and helps search engines understand what your images are about. Use relevant keywords in your image file names and alt tags. This not only helps with SEO but also improves accessibility for users relying on screen readers.

3. Adjusting levels

Adjusting levels refers to the process of modifying the brightness, contrast, and tonal range of an image to enhance its overall appearance. The levels adjustment tool can be found in most good photo editing software, including Adobe Photoshop, Lightroom, and GIMP. By fine-tuning these aspects, you can ensure your product images look their best while maintaining optimal file sizes.

Optimize your product image sizes with FooGallery PRO Commerce

Every second counts in e-commerce. Optimizing your WooCommerce product images is about creating a faster, more efficient, and more profitable online store that reflects as satisfied customers, lower bounce rates, and higher conversion rates. 

Your WooCommerce theme will have default image sizes that look best, so you’ll want to adhere to those on your WooCommerce pages. However, if you also intend to create custom product galleries with optimized images,  we recommend opting for a plugin that automatically adjusts images for you.

With top-tier functionality, responsiveness, lazy loading, image protection, and deep WooCommerce integration, FooGallery PRO Commerce is the best plugin for store owners wanting to set up beautiful custom product galleries that work with WooCommerce.

Explore the plugin’s gallery demos here (scroll down for PRO Commerce) and get creative – with full confidence that your images are optimally sized. Already convinced? Get started with FooGallery PRO Commerce today!