Slow-loading product images can seriously hurt your WooCommerce store’s speed. If left unchecked, they will frustrate customers and tank your site’s search rankings at the same time, ultimately hurting your sales in the long run.
But don’t worry! Optimizing your images is a straightforward process that can dramatically improve load times and provide a much smoother shopping experience. We do it for our clients all the time!
Let us dive into some of the simple solutions that you can implement to speed up your WooCommerce Site overnight!
Realistic Size for Product Images
Ask yourself a simple question: Do you really need a product photo that large? Unless you are selling schematics or maps, the answer is probably no. Simply look at Amazon; they rarely use images that exceed 1500 pixels in any dimension, and whenever possible, multiple images are used to display the fine details of a product which users can choose to view if they wish to do so.
WordPress automatically creates different thumbnails and variations for each image that you upload, and all images uploaded to the WooCommerce “Product Gallery” will use a small thumbnail by default, until the user clicks on one.
It also enforces a maximum image width (or height) of 2560 pixels (which you can change), but even that is too high in our experience because a 2560×2560 image will still be around 3 times larger in size compared to a 1500×1500 image.
Want to know the cherry on top? By default, WordPress does not make use of image compression or format optimization in its thumbnail creation process, which is an absolute deal breaker, ultimately forcing you to either manually optimize your images, or pick up an image optimizer plugin.
Optimize Images with a Plugin
While it is possible to optimize product images before you upload them to WordPress, doing so is a tedious task that you should automate as soon as possible, so you can focus more on running your business instead of checking file sizes and formats.
While there is a lot you can do, here is the core essence of what you need to do,
- Images need to be compressed (preferably with minimal loss in quality)
- Images need to be converted to a modern format (such as WebP)
There are plenty of plugins that do both of these tasks for free, as long as you have the necessary functionality on the server you are hosting WordPress on. Here are our recommendations:
Lazy Loading
Lazy loading is a clever technique that delays the loading of images until they are actually needed by the user. Imagine your product page has a ton of images in the long description – with lazy loading, only the images within the user’s current view will be loaded immediately. As the user scrolls down, more images will gradually load, reducing the initial burden on your website.
WordPress has implemented lazy loading into its core functionality for quite a while now, so chances are that your site is already taking advantage of this optimization. However, it is always wise to double-check, especially if you’re using custom themes or plugins that might interfere with this default behavior.
Most image optimization plugins, including the ones we listed above, will help you with this. You can this Lazy Loading Checker Tool to check if your website is properly deferring Images.
Avoid Transparency
Transparency in your product images, while sometimes necessary for design elements, can lead to significantly larger file sizes, regardless of the format that you use. Images use the alpha channel to control transparency, which controls the opacity of each pixel, similar to how the Red, Green, and Blue channels control each colour’s intensity in a pixel.
This alpha channel comes at a cost, a larger image size. This is usually where we remind our clients once again that if it works for amazon, it should work for you too.
We recommend you use a white background for your product photos instead of a transparent one, doing so will standardize your product images, you will be able to use JPEG wherever WebP isn’t supported, and it will make your designers slightly happier.
Still Slow? It Might Be Your Server
Even with perfectly optimized product photos, your WooCommerce site might still feel sluggish if your server isn’t up to the task. Server speeds play a crucial role in loading times, especially for eCommerce sites where resource-intensive processes run simultaneously to handle multiple visitors.
Here’s a quick rundown of server types commonly used with WooCommerce, from slowest to fastest.
- Shared Hosting: Affordable but often limited in resources, if you have a cPanel, this is what you are using. Images tend to load slow, especially if the host is over-selling their resources.
- VPS (Virtual Private Server): Offers more dedicated resources and control, this is generally the hosting we use for most of our clients as it offers a scalable solution that we can optimize accordingly.
- Dedicated Server: Full control over your server, unmatched performance, equally high costs.
We Can Help
Need help with the technical tasks we mentioned above? or suspect that your server is the bottleneck? Let’s talk!
At Void Solutions, we specialize in WooCommerce services and offer comprehensive maintenance packages as well. Reach out to us for a free quote on how we can fine-tune your site’s infrastructure, optimize your product images, and make other changes to give your visitors a seamless shopping experience.