WooCommerce Product Image Size and Dimensions: The Complete 2024 Guide

Optimize your WooCommerce store with the right image sizes! Our comprehensive guide will help you improve load times and boost sales.

Erica

senior director of creative product

There’s no doubt about it: Images can make or break your ecommerce business. Yep—regardless of which ecommerce platform you use. Ultimately, your sales depend heavily on nailing your ecommerce images.

That’s why you gotta get ’em right. Today we’re strictly spilling the deets on all things WooCommerce image sizing. but don’t worry. we also put together a little guide for your Shopify images—if that’s more your jam.

Types of WooCommerce images and their appropriate sizes

Let’s dive into the specifics of WooCommerce image types and the recommended sizes for each type:

1. Single product image: the largest image and refers to the main or featured image on your individual product details page.
2. Catalog images: medium-sized images appearing in product loops, such as the Shop page, Product Category pages, Related Products, Up-sells, and Cross-sells.
3. Product thumbnails: the smallest images used in the Cart, Widgets, and (optional) Gallery thumbnails underneath the Single Product Image.

WooCommerce single product images

WooCommerce product images are usually the first images that your customers see. They’re the main (larger) image, the star of your ecommerce show.

Best sizes for WooCommerce product images

Stick to at least 800 px in width for main product images. WooCommerce doesn’t have a height setting to adjust, so it will float proportionally according to the width of the image you uploaded. This is one reason you should identically size all of the product images you upload.

Changing your product image size to the exact width of your original image will disable your zoom feature (because your image box is identical to the width of your original image).

How to change WooCommerce product image sizes

Go to WooCommerce > WooThumbs > display. Then pop down to the image sizes section. input your preferred size into the single image width field. Then save and boom! Your main product image sizes will all be updated to reflect your changes.

WooCommerce catalog images

It's vital your customers can peruse a range of product images and videos to really fall in love with your products. That’s where catalog images come in.

Best sizes for WooCommerce catalog images

Some suggest 100 px by 100 px is enough to lead your customers to scroll through your gallery. Others suggest 300 px by 300 px is a better size to help entice your audience to spend more time admiring your stunning product images.

How to change the WooCommerce catalog image size

Head to appearance > customize > WooCommerce > Product images. You should be able to tweak your gallery image sizes from there. You can also use WooThumbs here. Head to WooCommerce > WooThumbs > display. Scroll down to the image sizes section and tweak the settings until you hit your desired sizing. Any sizing changes you make in this menu will only apply to your gallery images.

WooCommerce product thumbnail images

Product thumbnail images show up in a few places on your site:

• Thumbnail gallery images
• Related products
• Upsells
• Cross-sells

Best sizes for WooCommerce product thumbnails

These lil’ guys are typically sized around 300 px in width to make sure they’re visible but not so visible they dominate the visual space on the page.

You also have a few different cropping styles: square, custom, and uncropped. Uncropped will make sure you don’t chop off any important details but you’ll want to make sure all your original images are identically sized.

How to change the WooCommerce product thumbnail image size

You can also adjust your thumbnail image crop ratio here while you’re at it. Find your magic number and adjust accordingly to fit your style.

Benefits of appropriately sizing your WooCommerce product images

There are multiple benefits to making sure your WooCommerce product images are appropriately sized.

Photos display clearly on mobile and desktop devices

Appropriately sizing your WooCommerce images helps optimize your site for both desktop and mobile users.

Optimize for page loading time

Smaller, appropriately sized images can help improve page load speed, reducing bounce rates and keeping customers engaged.

Streamlines the sizing process

Establishing sizing standards for your WooCommerce product images helps streamline the sizing process. There will be no more guessing about exactly how big (or compressed) a product image needs to be.

WooCommerce image size FAQs

What do I do if my images are blurry?

You might need to update to the latest version of WooCommerce. It’s a good rule of thumb to make sure your original image is less than 100 MB in size, but they should be at least 800px by 800px for most themes.

What do I do if the product images are different sizes?

Start with the same sized image before you upload. You can make your life easier with a template (with your photo editor of choice) so you know you’re always uploading the same size image.

How do I hard crop WooCommerce thumbnails?

You can use the simple image sizes plugin to establish custom product image sizes for your site or head to appearance > customize. Then go to WooCommerce > product images to select your preferred thumbnail size cropping settings.