WooCommerce allows product images to be added to your products, either as a main product image or a series of gallery images.
When preparing these images in your image editing software, it is important to consider the type of image you will be adding to your website.
Typically product images either have a white/transparent background or a full-width image, similar to the examples below:
White or transparent background
Full-width image
Sizing
We recommend images are cropped equally square with h:1200px by w:1200px as standard. This will allow for cropping and image consistency when images are added to the website.
To ensure images with a white/transparent background are cropped correctly, we recommend using a boundary box of 1000px within the middle of the image.
The differences of how these are presented are outlined below.
Cropping Images (White/Transparent Background)
Set up your image dimensions as 1200px by 1200px.
Images with a white/transparent background should allow for spacing around the edge of the image to display correctly on the website.
The spacing or cropping boundary box should be a maximum of 1000px. If you place your product image within this range, images will be consistent and not be cropped further when added to the website.
This spacing is shown below in blue:
1000px boundary box within a 1200px by 1200px image
When adding products that have a white/transparent background, we recommend keeping your product image within the boundary box to avoid images being cropped when added to the website.
This is shown below with a product image fitting within the boundary box.
Recommended product image within the boundary box of 1000px
Product image once cropped to be displayed on the website
We recommend a maximum of 1000px as a boundary box to avoid your product appearing cropped when added to the website.
Cropping Images (Full-width)
Any images that are full-width should be cropped at 1200px by 1200px to create an equal square image.
We recommend that you crop these images to ensure the main area of the product you want to show is visible, as shown below:
1200px by 1200px example
Product image once cropped to be displayed on the website
Quick Tips
In your editing software, remember to:
– Set the image dimensions to 1200px by 1200px
– For white/transparent background images, use a boundary box of 1000px
– Crop full-width images within the 1200px by 1200px dimensions
