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. WooCommerce product image size should be optimized for optimum results.
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.
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 higher-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. You can use Wpoven - A managed wordpress vps hosting service with 24/7 server support to increase your loading time. Plans starting with just $16.6 per month with SSD storage, daily offline backups and unlimited website hosting.
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 1920x1080, 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.
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.
Some hosted ecommerce systems have already moved over to it (for instance, following a change made in mid-2019, stores built using Shopify now feature WebP images by default), 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.
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, 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.
See the above as an example: the image is 2006x994, 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.
Lastly, having looked at everything you can realistically do to lower 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. You can also read our WordPress Security Guide to secure your website now.
When you’re selling online, you need your store pages to load as quickly as possible, and your imagery plans 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.
We have prepared a tutorial to help optimize your Woocommerce Product Image size in your Store. So that you can load your WooCommerce store at lightning-fast speeds
Follow the steps to optimize your Woocommerce Images:
Step 1 - Firstly open your Admin panel in WordPress then from the left side select Wocommerce Tab. Now navigate to Products Tab then click Display -
Step 2 - Now you have to scroll down to change parameters for the following- Single Product image, Product Thumbnails, and Catalog image.
Step 3 - You have to uncheck the crop option, this will not allow your images to be cropped rather they will be resized. Save the changes made.
Step 4 - Now only the images that you will add in the future will be resized. If you want to re-size the previously added images as well you will have to use an extension to regenerate those images.
Step 5 - You need to download the new extension and install it in Plugins-> Choose Add New Tab.
Step 6 - Once the extension is installed you need to navigate to Tools -> Regenerate thumbnails and choose Re-generate all Images. Once you do that all the Woocommerce Product Image size will be regenerated.
