Get a fast, conversion-focused WooCommerce theme in 2019. Switch to Shoptimizer.

Home Blog – eCommerce News, tips and tutorials The ultimate guide to product images in WooCommerce

The ultimate guide to product images in WooCommerce

The ultimate guide to product images in WooCommerce

High quality product images are a crucial factor in driving visitor engagement to your WooCommerce store. After looking at the best WooCommerce examples, excellent photography was a common feature. In this guide I’ll be showing you how to create great images within WooCommerce which are also optimized for speed.

These performance benefits are a hugely important aspect of this. According to the HTTP Archive in 2019, images make up an average 21% of a total page’s weight. Having a fast WooCommerce site is crucial and you can see from the chart below what a big part images and video play in this.

These are the statistics for the average page size in 2019. We’re approaching nearly 2MB in weight due to excessive javascript, images, and video content.

Website page weight in 2019
The average page weight is 1828.3KB in 2019

Let’s dive in.

  1. WooCommerce image settings
  2. I’m missing image settings in the customizer
  3. How to I change the product gallery thumbnail size?
  4. What size images should I upload?
  5. My process for preparing WooCommerce images
  6. Optimizing images to ensure they load quicker
  7. BONUS – Removing the image zoom and lightbox

1. WooCommerce image settings

There was a big change in how images were displayed in the 3.3 release of WooCommerce. Image settings were moved into the customizer. Specifically you will find the WooCommerce image settings within: Appearance > Customize > WooCommerce > Product Images

Let’s look at the options you get, using our Shoptimizer WooCommerce theme as the example.

WooCommerce's product image settings screenshot
WooCommerce’s product image settings screenshot

You can control a number of key image parameters. The Main image width, Thumbnail width, and Thumbnail cropping.

Let’s set this originally to be 800 and 300.

The language can be a bit confusing so let’s go through these one-by-one.

Main image width

This controls the width of the product image on the single product page. You’ll have seen that there is no height setting. That’s because WooCommerce will display the image proportionally according to how it was uploaded.

You can use a feature within Chrome to discover the size of the image. Right-click on an image (Control key and click on a Mac) and select Inspect Element.

Checking the image width by using Inspect Element
Checking the image width by using Inspect Element

You’ll see the image is 800px as set by our WooCommerce image settings within the customizer.

Now, you may have spotted that Inspect Element has also revealed the true container size of the image – a width of 562px.

So, setting the main image width to this would be better – it’ll reduce the file size and make the page a bit quicker to load. But there is a downside to this. You will lose the zoom feature when you hover over the image as the image will be cut to the precise size of the container.

If you would like to keep this zoom feature, I’d suggest leaving this setting at 800. This allows the larger version to appear, with more detail, when hovering.

So it depends if you can live without the zoom functionality – on some sites this may be fine. If you’re selling items with a lot of detail such as jewellery it may be important to let visitors zoom in on the images to see more details.

Let’s do without the zoom for now and set the width to be precisely 562.

Set the new single image width
Set the new single image width

This width value will be different depending on the theme you’re using and the layout you’ve selected for the product page. If you’re unsure of the width your site is using, contact your theme developer for assistance.

After setting the new single image width value, the images won’t change immediately. WooCommerce instigates a background process and resizes the images gradually. Previously you needed to use a plugin such as Regenerate Thumbnails to do this, but these days WooCommerce will do it automatically.

Thumbnail width

This sets the width of the product thumbnails on the Shop and Category pages. Additionally, it will apply this width for Related products and Upsells (both on a single product page) as well as Cross-sells (on the cart page).

Plus, if you’re using WooCommerce shortcodes to display products elsewhere, such as the homepage, it will also apply to these.

Thumbnail cropping

I’d be wary of using anything but the Uncropped setting as there isn’t really any flexibility around which parts of the images are cropped.

  • 1:1 – will make all of your images hard cropped as squares. It’ll cut off the top and bottom of vertical images, which can make many images look imbalanced.
  • Custom – you can set a ratio such as 3:4 (that’s width to height) – which will make all images slightly taller than their width.
  • Uncropped – I’d recommend going with this.

Uncropped will maintain the proportions the images were originally uploaded with. This allows you to have the maximum control over how they look once you have uploaded them consistently. I’ll be going over my process later in this article.


2. I’m missing image settings in the customizer

If you go into the customizer and you’re missing the image settings within: Appearance > Customize > WooCommerce > Product Images then your theme has likely set the dimensions programatically within the code.

Settings these within the code removes them from the customizer.

There may be a reason it was applied in this way, I’d recommend contacting your theme support to find out more. It may be simply a case that you’re running an older WooCommerce theme, and setting the dimensions within the theme was the way things used to be done.

These days, many themes, including Shoptimizer will allow users more control over how images are displayed.


You probably noticed that a specific option for the product gallery thumbnails are missing from these customizer options. WooCommerce used to have a dedicated image setting for this in the pre 3.3 release but have removed it.

The product gallery thumbnails
The product gallery thumbnails

If you have set the the thumbnails set to be Uncropped, the thumbnails will display proportionally to how you originally uploaded them.

If you want more control over the thumbnail size, you can adjust their dimensions via a filter. You’d add the following code to your child theme’s functions.php file (if you’re using Shoptimizer, we have a child theme here) or by using the Code Snippets plugin.

Once you’ve added this snippet, you’ll need to install and run the Regenerate Thumbnails plugin to resize your gallery thumbnail images. Unlike the catalog and single images, this is not an automated process.

If you’re using Shoptimizer – we include a CSS rule to keep the thumbnail display at 70px within the CSS. To overrule this and make the width match the dimensions above, add the following to your Additional CSS panel in the customizer.


4. What size images should I upload?

As we saw in the settings above, should we just upload images which are 800px in width?

Personally, I upload images slightly larger than this as it allows me more flexibility if I want to change things in the future.

With screen sizes getting wider, you may want to include an additional break-point for larger screens at some point. This would increase the grid width, requiring wider product images also.

I’ve seen some massive WooCommerce catalogs with thousands of products and all of the images were uploaded far too small. I’m talking 250px in width which just don’t look good. So don’t make this mistake and upload product images at least 1200px in width.

You can always reduce the size of images that are displayed but you can’t scale them up.

Plus, uploading larger images allows you to the flexibility to utilize the image zoom feature of WooCommerce if you wish.


My process for preparing WooCommerce images

I’m going to quickly go through how I prepare images for a WooCommerce site. My image editor of choice is Photoshop but you can use alternatives such as Sketch or GIMP (free).

1. Create a consistent canvas

Firstly, I create a consistent canvas size. This is key. I don’t want irregular sized product images on my store or rely on WooCommerce’s own sub-par cropping.

Photoshop product canvas
Photoshop product canvas

I’m creating a canvas which is 1280px in width and 1500px in height. The resolution is 72 and the color mode RGB which is designed for the web.

2. Add a light grey background layer

The next thing I do is draw a rectangle layer on the canvas and make it a light grey color – specifically #eeeeee. This creates a natural background for each image and makes them better defined when on a grid.

Adding a light grey layer as a background
Adding a light grey layer as a background

Next, import the product image you want to use and position it on the canvas. Hold down shift while reducing the corner edges to make sure that the proportions are kept.

Position the product image on your canvas
Position the product image on your canvas

You’ll see that the product layer is above the grey background layer. Also, the image has a white background which doesn’t blend yet with the background color.

3. Change the layer setting to ‘Darken’

Next, with the product image layer selected change the dropdown from Normal to Darken.

Changing the product layer to 'Darken'
Changing the product layer to ‘Darken’

You’ll see that it blends in with the grey layer now and you no longer see its own white background.

4. Export the image as a JPEG and keep the size below 100kb

Our final step is to export the product image. This is via File > Export > Save for Web

Export the product image
Export the product image and try to get the file size below 100kb.

Our goal here is to try and keep the file size below 100kb in size. In most circumstances a JPEG is the best choice. So choose that and reduce the quality slider down until you see the resultant file size drop below 100kb on the bottom left.

On certain items with a lot of detail this may not be possible. But do try and get the size down as close to possible to this figure.

Just repeat this exercise for each product image. Also, try to use file names that make sense and don’t use any spaces or unusual characters. For example using autumn_florals_top_01.jpg will give search engines a much better idea what the image contains.


Optimizing images to ensure they load quicker

If you’ve followed this guide and have exported your product images at around the 100kb file size, then you’ve done a lot of the work already.

There are a number of image optimization services out there where you can shave an extra couple of kilobytes from images such as TinyPNG, and Optimizilla. But the reward from this is minimal and it’s time consuming.

Instead I recommend performing two actions which take only a couple of minutes and applies to every image immediately. These are:

  • Use an images CDN
  • Add lazy loading

An images CDN means that the images are no longer loaded from your own server. They use the CDN’s, alleviating the load and providing much faster rendering times.

Lazy loading increases page speed by not downloading any images which are not yet in the user’s viewport. If there are one hundred images further down the page and the user never scrolls to them, the page does not have to wait to load them.

Enabling these features within Jetpack

The easiest and simplest way to do both of these is by using Jetpack. This plugin gets a lot of haters but if you switch off all modules apart from these two, performance will be excellent. We’ve also tried dozens of lazy loading plugins and have found that Jetpack’s is by far the best we’ve come across.

Images CDN and Lazy Loading within Jetpack
Images CDN and Lazy Loading within Jetpack

After installing the plugin go to the Settings area and click on the Performance tab. From there you can Speed up image load times and enable lazy loading.

After enabling these settings, take a look at your product image markup using Inspect Element again and you should see two things.

With Jetpack enabled
With Jetpack enabled

You should see the images are now loaded from a wp.com domain and there is an additional class: jetpack-lazy-image. This means both features have applied correctly.


BONUS – Removing the image zoom and lightbox

One last thing you could do (if you don’t need them) is to remove WooCommerce’s lightbox and image zoom on single products. This reduces the CSS and JS requests on your single product page, providing a small speed increase.

You’d add this function via the Code Snippets plugin or within the functions.php of your child theme.


Over to you!

Now I’d like to hear from you.

Which of these image optimization techniques is most useful for you?

Do you have any great tips which would be useful for other readers?

Let me know by leaving a comment below right now.

About Simon: Designer, developer and pixel pusher until things are just right. Interested in modern, functional design with a focus on speed, clean typography and conversions. Enjoys whitespace and strong coffee.

Shoptimizer WooCommerce Theme

Shoptimizer is a FAST WooCommerce theme that comes with a ton of features all designed to help you convert more users to customers.

More details  →

Shoptimizer WooCommerce Theme screenshot

Latest eCommerce Guides View all Guides

4 Comments

  1. Thanks for the tips Simon! I’ve now enabled the Jetpack Images optimizations as you have suggested.
    When it comes to images, I usually tend to save them at around 50-60 quality in Photoshop…below that it feels like it’s too pixelated, but maybe it’s just me.

    Anyway, great job, really helpful blog posts! 🙂

  2. Hi Simon,

    I just wanted to say thank you for this detailed guide.

    I recently switched over to WPCompress for image optimisation and CDN. Their compression seems to sharpen smaller thumbnails which works very well for my products with sometimes intricate designs.

    The delivery of images in Australia is super fast. Especially on 3G connection, it makes a difference.

    Cheers,
    Edward

Leave a Reply

Your email address will not be published. Required fields are marked *

Latest Updates

$50
Off

Do you want a whopping $50 off Shoptimizer for WooCommerce?

Click the button below to get Shoptimizer for only $49. (Regular price: $99).
This is a special launch offer for today only.
Get it before it is gone!
{"cart_token":"","hash":"","cart_data":""}