021 158 1400 [email protected]

How to save product images for WooCommerce correctly

If you have a shopping cart in a website designed by Woodswork you will need to know about saving images for WooCommerce products.

These same principles apply to optimising any image for your website. When we add a name to a general page image it would contain keywords rather than the product name and the image would be sized differently for different uses. Learn more about adding and editing images in other areas of your site.

This tutorial shows the method via Photoshop.

UPDATE: We have also researched other options since this tutorial was created. Head over to our Optimising Images for Web tutorial to see a great free alternative that is super easy to use.

Open the image

From within Photoshop, select Open.
This will allow you to navigate to the folder you have your product images in. 

saving product images

Select the image

Depending on your computer, you will most likely see a window open where you can navigate though your drives and folders to find the raw image you need.

saving woo product images

Setting the size on images for WooCommerce

For WooCommerce images we prefer a 1:1 ratio which will be a square. It suits all products whether they are horizontal or vertical. This is also a standard preset for WooCommerce. However, if you sell clothing on a model you may prefer the image to be taller than it is wide.

A good image size for the product images is 800 x 800 pixels.

Select the cropping tool (shown as greyed onthe left hand side) and you will see the settings fields for the cropping size.

how to select a blurb module

Cropping the image

Using the cropping tool, select the area of the image you want to show. Double click inside the grid to crop.

resizing images for web

Optimising the file

Optimising the file is important for site speed. The smaller the file the better, without compromising the quality.

Head to File > Export > Export As

images for WooCommerce

Save and name the file

Save the file and a box will pop up to name the file. Make sure that you add a relevant name to the file describing the product. This is important as it helps with search engine optimisation.

saving images for web

The next step

Now that you have your image ready to add to your new product go ahead and watch the next tutorial on how to create a new simple product in WooCommerce.

As always, if there is any other information you would like to see let us know.