You want the size of the images in pixels that you upload to your site to match the size you set for 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. Make them unnecessarily big and you are uploading bigger file sizes that the system will use. So it will reduce their size, but the bigger file size will be a drag on the system making it slower than it need be.
Image Types in WooCommerce
WooCommerce uses different types of images for your products:
- 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 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.
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 om desktop.
Ensure the images resize appropriately for mobile smaller screens and remain clear.
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.
Tips
Make all product images the same size to give a consistent layout. This can be a problem if some of your images are in landscape orientation and some in portrait orientation. If you use square dimensions then images are going to be 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 then here’s a recommendation. Use a square layout and place both portrait and landscape images against a plain background. The downside 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 not cropped.