For any online store, optimized product images are an absolute necessity. Your product images are one of the important factors that customers consider before making a purchase decision. This is particularly relevant for some industries (like fashion), where the purchase decision is totally dependent on the looks of the product. So, if you have a WooCommerce store, you should know how to manage and optimize product image size on your store. In this article, we will discuss some of the strategies you can follow for better management of product images.
Use an image CDN to optimize image delivery
When you create an image gallery for your products on your WooCommerce store, the images are stored in your server. Based on the distance between the server and the customer location, there can be a delay in serving large files. That is where a content delivery network (CDN) will help you achieve faster page loading speeds.
Read our article to understand more about free WordPress CDNs
Now, if you are wondering how to optimize image delivery, you should know more about image CDNs. An image CDN will help to reduce latency in image delivery significantly and helps with faster image loading across the world. The primary advantage of using an image CDN is that they makes it extremely easy to have different variations of the same image. This is the reason why the image url delivered from an image CDN will have information on different aspects such as size, format, quality, etc, along with the source location. The image url will also include various signals that will help to create optimized transformations according to situations.
There are different image CDN services that you can rely on for your WordPress WooCommerec website. Here are a couple of them:
This tool will help you serve optimized images from a global network of servers to help your pages load faster. It will help you manage images on your posts, pages and featured images as well. Your old and new images will be optimized when you configure this tool, and it also offers an easy option to disable. In addition, it will help you serve images in the .webp format if your browser supports it.
Cloudinary is a great solution that will help you optimize your site performance and ensure better conversions on your store. One of the main advantages of using Cloudinary is that it will automatically detect the best format in a situation and accordingly serve it. It also manages the compression quality and determine the right settings for each image you display. Furthermore, it scales image resolution based on the user’s device and even dynamically crops images.
Cloudinary also ensures that there is no latency in delivering content as it helps you employ multiple CDNs. Moreover, the custom image urls will be optimized so that search engines can interpret them meaningfully.
Compress Product Images
You can compress product images, where the file size is reduced without changing the dimensions to load them faster for users. You can do this without affecting the quality at all or with a slight reduction in quality. For WooCommerce stores that feature a large number of products, this is one of the best ways to reduce file size.
There are a few tools that will help you compress images for your website. We will discuss one here:
This plugin will help you compress your images in a single click. When you upload images to your site, they will be automatically optimized to a specific level of compression. And, you will be able to revert the compression to their original levels as and when you need. The plugin offers three levels of compression and you will be able to choose the one that you think is most suitable for your store.
The main advantage of having this plugin is that you don’t really have to sit and edit the images before you upload them. It ensures automatic compression of all your images including thumbnail as well as retina images. You will even find a free plan where you can compress up to 25 MB of images.
You can resize images on your WooCommerce store to ensure you are managing them in an optimized manner. Smaller dimensions of an image will mean smaller file sizes when you are talking about WooCommerce product images. Basically, this depends on how much detail you want to offer your customers through product images. If you are selling something that requires the users to zoom in and check, it is not a good option. However, if you are using images just for representational purposes, it doesn’t have to be too detailed, and hence you can go for smaller dimensions.
In most cases, you don’t have to upload the high resolution images from professional cameras. So, you can resize them before uploading or use an image resizing tool after uploading. Here is a tool that you can use for resizing images.
You will be able to optimize images without any limits using this plugin. The plugin lets you compress and resize images of large sizes so that they are optimally displayed on your store. It uses multi-pass lossy compression that help you with up to two times better savings. Moreover, if you have already uploaded majority of your product images to your store, you can still optimize them in bulk with a single click.
And, you will get a seamless resizing option, as mandated by Google. Based on the screen size of the user, Smush Pro will resize images and offer the most suitable size for a specific user. You also get other features with this plugin such as webp conversion, lazy loading, etc. In addition, you will also get access to the CDN service that they offer.
Check thumbnail dimensions
When you upload images to your WordPress site, they will be automatically resized to different sizes for different uses. WooCommerce creates thumbnail dimensions that will be used for catalog page as well as other pages. These will be also dependent on the dimensions set by the theme you are using. So you need to see what is the optimum size of thumbnails on your store, and accordingly adjust the size.
On your WooCommerce store, you can navigate to Appearance > Customize > WooCommerce > Product Images to create the thumbnail dimensions. You can choose one of the options or specify custom dimensions.
Decide on the file format
The file format that you use while uploading images is another concern while you try to optimize WooCommerce product image. Two of the most commonly used formats for WooCommerce product images are PNG and JPEG. Experts generally recommend to use JPEGs for your product images. This is because JPEGs offer the best quality when you have concerns about the file size. When your image needs to include a lot of details and colors, JPEG will give you a better optimized file size.
However, PNG is a good option when you are using transparent backgrounds or images with opacity. For example, screenshots and other images that don’t use multiple colors can be in PNG format. WebP is a format that will actually help you optimize your images. However, all browsers does not support this format and hence it is not always recommended. If you are using one of the image CDNs we discussed earlier in the article, it will be an option as the files will be served specific to the browser.
Experts also suggest to use simple backgrounds to your product images. You can see this in popular eCommerce websites, where a simple white background is used for product images. This gives a professional appearance to your product images and also provide another advantage. If the background is too colorful, that means the image file has to store that much more data. This would complicate your optimization strategies and hence a simple background will be way better for WooCommerce product images.
Use ‘Save for Web’ option
If you are using an image manipulation software to edit your images, you can always use the ‘save for web’ option while saving an image. Most software will have an option to help you find a balance between image quality and file size. Image editing software like Photoshop, Sketch, Pixlr, etc. offers this option to help you optimize your images.
Hope this article has provided you a basic overview on how to optimize WooCommerce product image. Leave us a comment if you have a query.