WooCommerce Image Tips

When it comes to our online stores, we want everything to be picture-perfect. After all, the internet pits us against retailers big and small around the world: we practically need things to be just right or we’ll end up pulling our hair out in distress. In this article, we’ll cover a set of very common issues regarding aspects of a good WooCommerce image – resolution, ideal proportions, and alignment, with some tips to help along the way.

[toc]

What shape/dimensions should my WooCommerce image be?

This isn’t asked as often as it should be, but properly setting a standard image dimension can dramatically improve your site’s appearance and performance when it comes to a user perspective.

In practically all cases, I suggest that your images be squares. If it’s on a white background then this is particularly easy – you can crop images so they’re all on white backgrounds, and so forth.

This isn’t so easy when you have products that don’t fit into a square – selling dresses, for example, would benefit from longer portrait shots. In this case you can use Photoshop or a free online alternative like Pixlr to add white backgrounds.

If a square isn’t possible, then ultimately you want to try and get all of your images to be the same dimensions, be it 4:3, 16:9, whatever is the most fitting for you. It’s worth noting that unless specified otherwise thumbnails will generate square, so account for that when sizing images.

Why is this important? It makes your Shop page look nice, neat, and in-line:

Lined Up Square WooCommerce Images

What size should my WooCommerce image be?

When talking about image resolution (dimensions in pixels), it very much depends on what you’re selling. If it’s something that would benefit from a full-sized, high resolution image (like artwork, fine jewelry, etc.) then the bigger the better – you could go so far as to something like 3000px wide for a very drastic photo zoom. 

However, this will certainly slow down page load times, and isn’t necessary except for the most extreme circumstances. In setting up dozens of stores, I found a good image resolution to be 1000px to 1500px, square. This is large enough that you can take advantage of the Photo Zoom feature built into WooCommerce, but not so large that it causes problems.

WooCommerce Image Zoom - Nuka Cola Caps

My site is slow – how do I keep my images and improve site speed?

Amazon Web Services LogoImages will always slow down your page, even though they’re essential for your store. To combat this, sites can use a Content Delivery Network (CDN). While Amazon CloudFront is by far the most popular and very likely the most powerful, it does take some technical know-how. Some plugins like WP Super Cache (which I use on this site) can assist with this process.

 

Alternatively, the free Jetpack plugin has an Image CDN built in which loads images onto the ultra-fast WordPress.com servers. This takes the weight of sending images to customers from your site and will drastically improve load speed for image-heavy sites. There’s also nothing stopping you from using multiple CDNs – on this site, I use both Amazon Cloudfront and Jetpack, so image speed is usually a non-issue.

I’ve tried all of that and my images still aren’t lining up on the Shop page.

If you’ve gotten this far and your images aren’t lining up, then there’s likely one of two problems – it’s either with your theme, or your titles on some products are too long which pushes that column down. In both cases, contacting the theme author or using some CSS to set a clear:left or clear:right command should do the trick.

I have other WooCommerce Image problems I need help with!

I’ve previously written how to deal with WooCommerce Image issues like stretching, distortion, and blur, so take a peek over there to see if it helps with your site.

If you’ve searched through public forums, help groups, surfed the Googles, and done everything else – feel free to ask away in the comments below!

Leave a Comment