Last Updated on April 23, 2020 by Sunny Staff
Using WooCommerce to sell online is a sensible move, because it’s strong in a wide variety of ways. It’s 100% free (and built on a free CMS in WordPress), compatible with countless other plugins, easy to use, flexible, and quite powerful — even with no custom configuration. But no ecommerce system, no matter how good, will do everything for you by default. Sooner or later, you need to get involved, take charge, and make some necessary changes.
But what changes do you need to make? Well, for obvious reasons, ecommerce merchants base all their actions on how they’ll affect sales. If you can improve your website, but it won’t help you sell more products, then it isn’t worth doing — and one thing that undoubtedly will help your revenue is increasing your store’s speed.
Image credit: Pixabay
The modern shopper expects store websites to load incredibly quickly. The more they’re required to wait for a website to load, the less interested they become in sticking around. They know that there are plenty of other stores out there, so there’s little practical justification for waiting for one store in particular, and this can prove very damaging if your store is slow.
Making your store faster can involve cutting back on the on-page content, removing features, or moving to a high-performance host. However, one element that can easily go overlooked is imagery. High-resolution product photography is extremely important in ecommerce, but the files can be huge if left unchecked — and you need to deliver them quickly.
So how do you get your WooCommerce images under control to maximize your store’s speed? Let’s take a look at the tactics you need to know:
Choose the resolutions carefully
Something that’s important to remember is that the average screen resolution probably isn’t as substantial as you’d think. In fact, the average desktop resolution looks to be below 1920×1080, meaning that an image of that size (or even slightly smaller) would almost always be adequate. When merchants upload giant images (upwards of the 4k standard), it takes up loading time without making any meaningful difference for most users.
Image credit: Wikimedia Commons
It’s worth taking a look at your Google Analytics to see what your average visitor browser resolution is, and cater your image sizes accordingly. I think it’s best to keep the largest versions of your images in storage, then manually shrink them to fit your image spaces, but that isn’t the only option available to you. You can also automate it — but more on that next.
Switch to the WebP format
Websites most commonly use the JPEG and PNG formats, with each one having different strengths and weaknesses (the former is good for detail-heavy images, while the latter is good for simple images and those featuring patches of transparency) — but the WebP format (which was first released in 2010) fits both image types, and saves quite a bit of space.
Image credit: Digital Noir
Some hosted ecommerce systems have already moved over to it, but WooCommerce — being built on the open-source WordPress — doesn’t apply any kind of native image adjustment. Thankfully, you can simply use a plugin. Something like Smart Image Resize should be suitable, and as the name suggests, it’ll also (primarily, in fact) resize your source images as needed.
Keep details to a minimum
One tactic that doesn’t occur to most webmasters is making changes to the content of their images, partially because they don’t understand how image files work. The algorithms for the JPEG, PNG and WebP formats work similarly in principle: the images are analyzed in various ways (for instance, the brightness is separated from the color, and unneeded color information is discarded) and stored as instructions that can be used to reproduce them.
Because of this, the size of a compressed file depends on the complexity of the original image: reduce the complexity, and you save space. Here’s a real-world example: if you photograph your products in front of a blank background (something that’s also important for keeping focus on what you’re selling, particularly with high-end items like jewelry products), you’ll be able to achieve greater compression than you would if you used visually-complex backgrounds, because large monochromatic areas can be expressed through simple instructions.
Image credit: Wikimedia Commons
See the above as an example: the image is 2006×994, but just 56.4kb as a compressed JPEG, and only 45.23kb as a WebP file. To put this very simply, use monochromatic backgrounds, ensure even lighting, and crop out anything other than your products. This will allow you to achieve much smaller files without reducing the resolution or meaningfully reducing the quality.
One other note: for images that are simple but need to scale significantly (color backgrounds, for instance, or logos for your business), try using the SVG format. Saving an image as a vector turns it into a formula that can produce a crisp image at any size, and if it’s very low in complexity (few colors, basic shapes, no shading, etc.), then the resulting SVG can be tiny. Here’s some more information on how this works.
Set up a CDN
Lastly, having looked at everything you can realistically do to reduce the size of your images, we must consider the importance of setting up a CDN to serve files faster throughout the world. A CDN is a content delivery network — it works through storing copies (or caches) of your images at different places across the globe, meaning that anyone who visits your site can be served the images from the nearest caches. This can save quite a bit of time.
Thankfully, there are plenty of viable CDNS — both free and paid — to use with WooCommerce, so check out the link above to run through some options. In all likelihood, Cloudflare will meet your requirements, so give it a try to see if it’s suitable.
When you’re selling online, you need your store pages to load as quickly as possible, and your imagery plays a crucial part in that process. Use these tips to optimize your WooCommerce images for speed, and you should see a strong uptick in loading times.
