flying twigs

This is about how to match product image files sizes and display sizes.

In WooCommerce you want the product image sizes in pixels you upload to your site to match the size of the images that are displayed on the site.

You want to make the images you upload to be the right size, just like Goldilocks. Too small and the system will blow up the images to larger size and they will look blurry.

On the other hand, if you make them unnecessarily big then you are uploading bigger file sizes than the system will actually use. So it will reduce their size, but the bigger file size will still be there and it will be a drag on the system making the website slower than it need be.

Product Image Types in WooCommerce

WooCommerce uses different types of product images:

• Main Image (Single Product Image): This is the large image on the product page.
• Catalogue Image (Thumbnail): Displayed on the shop page, category pages, and product listings.
• Product Gallery Thumbnails: Displayed below the main product image on individual product pages.

Check Your Theme Requirements

Your WordPress theme often determines the best product image dimensions. Some themes will have recommended image sizes to ensure proper layout and presentation. You may find these recommendations in your theme documentation.

And if your theme uses the Customiser then you can check these under Appearance > Customize > WooCommerce > Product Images.

Block Themes Don’t Have A Customiser

Actually they do, but the URL is not so obvious. You will find it at

~/wp-admin/customize.php

Standard WooCommerce Image Dimensions

If your theme doesn’t provide specific recommendations, you can use the default WooCommerce image dimensions as a starting point:

Main Image: 800 x 800 px or larger for high-quality zooming effects.

Catalog Image (Thumbnail): 300 x 300 px or similar for shop and archive pages.

Product Gallery Thumbnails: 100 x 100 px or similar.

Set Image Dimensions in WooCommerce

To configure image sizes in WooCommerce:

Go to WooCommerce > Settings in your WordPress dashboard.
Click on the Products tab, then go to the Display section.
Scroll to Product Images and adjust the image sizes.

The Main image width is the main product image on single product pages.
Thumbnail width is used for product gallery images and product thumbnails.
Thumbnail cropping allows you to select cropping options or leave uncropped.

Test Responsiveness

Once you’ve set the dimensions, check how your images look on different devices:

Make sure the images are sharp and fill the space correctly on desktop and ensure the images resize appropriately for smaller screens.

Regenerate Thumbnails

If you adjust image dimensions after uploading images, you will need to regenerate thumbnails to apply the changes across your site. You can use a plugin to regenerate thumbnails.

A Tip About Aspect Ratios

Make all product images the same size and the same orientation to give a consistent layout.

If your images are not square and if some of your images are in landscape orientation and some in portrait orientation, and if you use square dimensions then the images are going to appear cropped.

If you do not crop and choose a portrait layout (say 800 x 1200), then landscape images are going to be 800 across and will not fill the depth of 1200.

If you really must have some images in portrait orientation and some in landscape and you want to avoid cropping, then use a square layout and place both portrait and landscape images against a plain square background. The downside of this approach is that the images will be smaller on the page than if one or the other format is chosen.

But at least they will all be the same size and they won’t be cropped.