Improve Conversions and Page Speed with Product Image Compression

The answer is simple: page loading speed. The image on the right is 5 times smaller than the image on the left. On average, images make up over 64% of the data on websites. eCommerce pages, filled with catalogs of product images, are among the most intensive. The modern, impatient customer is not willing to wait for your images to load – no matter how beautiful they are.

The data on a study from Kissmetrics shows that users on desktop computers are willing to wait up to five seconds for websites to display text and images, while mobile users wait only three seconds until they get fed up and leave!

If you want to have an ultra-fast website and generate more online sales, you need to optimize your site’s images. How?

The solution is one word: compression. In this post, we will cover all aspects of product image compression so that you can vastly improve the page load times (speed!) and conversions (money!) of your online store.

The 2 second benchmark

It’s necessary to get technical when talking about eCommerce — especially when discussing product photography. Taking the time to fully understand topics like file compression might seem tedious and even unnecessary, but making small adjustments to your product images can greatly improve the performance of your online store. Reducing page load times improves your customers’ shopping experience and leads to more sales.

Poor page loading times can damage a brand, permanently. A study by powerhouse content delivery company Akamai found 2 seconds to be the benchmark loading time for an eCommerce site. 2 seconds! If your page takes any longer to load than that, you are failing to meet customer expectations. If your page takes more than 3 seconds to load, 40% of customers are so dissatisfied they will leave your site. They also found that dissatisfied customers carry a grudge:

“79 percent of online shoppers who experience a dissatisfying visit are less likely to buy from the same site again while 27 percent are less likely to buy from the same site’s physical store, suggesting that the impact of a bad online experience will reach beyond the web and can result in lost store sales.”

Speed matters and the importance of publishing quality images to your site that have been properly edited, formatted, and compressed cannot be overstated!

Image compression

File compression is a method of reducing the size of an image with limited reduction in image quality. Compression is not only a useful technique to decrease the load times of your product pages, but is also helpful for lowering the overall amount of data served to the customer (bandwidth) and for consuming less digital storage space on your hosting server. Using less storage space and bandwidth will save you money on your web hosting plan.

As a general rule of thumb, a more compressed image will appear more pixelated, and vice versa. An overly compressed image may begin to look dull and out of focus. Take a look at the example below:

The above image has been compressed a little too far, but don’t worry! That’s not what all compressed images look like. There are three main ways you can compress your images:

1. Lossless compression

Lossless compression allows all of the original data in an image file to be recovered when the file is uncompressed. Using a lossless compression image format can generally save between 5% to 20% of the original file size. The exact reduction in size is entirely dependent on each individual image.

The most common file formats for lossless compression are .PNG and .TIFF. When viewing files with lossless compression on a monitor, you should not notice any pixelation as the image data is still 100% intact. Lossless compression is typically used for print and is usually frowned upon for web because the file sizes are large and can result in slower page load times.

While we do not recommend lossless compression for the web, we do recommend it when you want to save the image files you have worked on in Photoshop or another editing program like GIMP. Doing so will reduce the size of your RAW files (files directly from your camera), which should be archived for later use.

For example:

• On your Camera
  • Adjust your camera settings to shoot in RAW format
    • Learn about the benefits of shooting in RAW in our manual camera settings guide.

• Post-Production / Image Editing
  • Open the RAW images files in Photoshop for editing and retouching
  • Save the processed file as a .TIFF for later use
  • Save the file as a .JPG for use on the web (More on .JPGs below!)

Another lossless compression technique is to remove the meta data from your image files. Most digital cameras and smart phones include EXIF (Exchangeable Image File) data in image files that includes things like GPS location, camera type, ISO, flash activity, lens type, etc. This information can be easily removed from your images to reduce the file size

Several programs exist such as EXIF Tool that can help you safely strip this information from your product images.

What’s in a name? Take the name of the compression: Lossless. Lossless compression means that you “lose less” data. Lossless = lose-less.

As you can see below, saving the file in a TIFF format can greatly reduce your file size without compromising your image detail and data. The image on the left is the RAW file and the image on the right is flattened TIFF file.

2. Lossy compression

Images that have been compressed using a lossy file format will experience a minor reduction in quality but a major reduction in file size. Lossy compression is a best practice for web optimization. The goal in lossy compression is to reduce the file size as much as possible while keeping the appearance of the image intact. This compression technique is typically able to remove a large amount of image data that isn’t noticeable to the human eye without zooming on a high resolution screen. Use lossy compression to significantly reduce the size of your image files and reduce the overall page load times of your website.

The most commonly used file format for lossy compression is .JPG. When saving an image in .JPG format it is possible to choose a value for the “quality” of the image or the amount of compression.

For high quality results on your site, we recommend selecting a .JPG quality value of 8 or above.

The higher the number on the compression quality, the better your image will appear on screen. Lowering the quality number will result in smaller but more pixelated images. For example, when you take a document and xerox it, then xerox THAT xerox and so forth, each new document will lose data and reduce in quality upon each new copy. This is what happens when you compress a file into a .JPG. The more you compress each file, the smaller and more broken up your image will become, resulting in poor quality and loss of data.

What’s in a name? Take the name of the compression: Lossy. Lossy compression means that you “lose” data. Lossy = lose.

Look at the huge change in file size: an image that was 5.1 MB as a .TIF has been compressed to 953 KB as a .JPG. That is over 5.35 times smaller. Put another way, that’s a size reduction of 81%! Now multiply that by the number of images on your website, and you can see why compression makes such a powerful difference in page loading speed.

3. Background removal

Perhaps one of the most effective ways to reduce file size is to remove the image’s background.

As the name suggests, background removal is the process of removing the area behind the main product in the image. By removing the area behind the product, you are able to strip away additional data in the image file. This technique is often the perfect solution for product photographers as it allows you to achieve a clean, professional looking product image while minimizing the file size.

Background removal can be a tedious and often frustrating task to those without professional Photoshop training. Happily, it’s very easy to outsource image editing and retouching to a professional company like Remove the Background. In just a few simple clicks, you can create detailed specifications that guarantee product images are consistently cropped, resized, retouched and compressed according to your needs. Would you like more advanced options? Add a ghost mannequin effect, add shadows, and perform color correction while you’re at it. Use Remove the Background to free up time and energy to focus on building your online business.

As shown below, background removal can help reduce your file size that much more!

As you can see through the process of compression, the file sizes will get smaller and smaller.

So, can you spot the difference now?

The image on the right shows lossy compression (from .tiff to .jpg format). The reduction in quality is not as high as it is in file size: more than 6 times smaller. That´s great for speeding up a website!

Reduction: 84%

In the end, what you need to know:

Applying these compression methods to your product images will not only reduce the size of files but will also benefit your business by:

• Reducing your page load times
• Reducing your bounce rate
• Reducing space used on your hosting service.
• Reducing bandwidth
• Accurately presenting your products with sharp imagery
• Having your images ‘rank’ higher in google image search

As you have learned throughout this article, using web-appropriate image compression techniques is incredibly important for the success of your online store and your image SEO strategies.

Happy compressing!