Practical Ecommerce

How to Optimize Ecommerce Product Images for Faster Pages, High Conversion

Ecommerce product photography must convey an item’s value and functionality while inspiring shoppers to buy. Whenever possible, product images should also be lean and fast loading. The challenge, then, is to produce large, attractive images at relatively small file sizes.

Walmart, one of the largest retailers both online and off, does an excellent job of striking the balance between good photography and small file sizes.

For example, the product image for a “Juniors Wonder Woman” graphic t-shirt on the Walmart site was 450 pixels by 450 pixels and just 12 KB. That is a stunningly small file size for such a relatively large image.

Walmart, which probably uses a script to optimize images, includes a WebP format for this image, which is 450 pixels square and just 12 KB in size.

Walmart, which probably uses a script to optimize images, includes a WebP format for this image, which is 450 pixels square and just 12 KB in size.

A more interesting product photograph for a Wonder Woman graphic tee on the Hot Topic website is another good example of an image that is at once large enough to help sell the product (443 pixels by 598 pixels) and small enough, in terms of file size (just 45 KB in this case), to reduce page load times relative other images of a similar size.

Hot Topic's relatively large product image is just 45 KB.

Hot Topic’s relatively large product image is just 45 KB.

By way of comparison, one of the product images for a Wonder Woman t-shirt on the Popfunk website came in at 1,000 pixels by 1,000 pixels and 1,349 KB or 1.3 MB.

Popfunk's images, which can be enlarged, were much larger in file size.

Popfunk’s images, which can be enlarged, were much larger in file size.

While even the Popfunk image is not unreasonably large given the image quality, it does demonstrate just how well Walmart and Hot Topic optimize their images. Walmart is getting more than 16,000 pixels per KB.

Walmart and Hot Topic do a good job of optimizing product images, as shown in this table.  Popfunk is less effective at optimizing images. (Width and height measurements are pixels.)

Walmart and Hot Topic do a good job of optimizing product images, as shown in this table.  Popfunk is less effective at optimizing images. (Width and height measurements are pixels.)

There are certainly many strategies for optimizing product photos, three of these include using image compression tools, using photo manipulation and processing software like Adobe Photoshop CC 2015, or using scripts in PHP, Python, or similar.

Image Compression Tools

There are many paid and free image compression tools available. Some of these software image compressors must be downloaded to your computer, while others run from a website.

A search on Google or Bing, will yield dozens, if not hundreds, of image compression tools. Here are a few that you might consider. These are listed in no particular order.

Web-based tools:

Downloadable image compressors:

Photo Processing Software

Adobe Photoshop CC 2015 is arguably the current best-of-breed software solution for photography manipulation. Photoshop CC 2015, which was the most recent version of the software at the time of writing, also has a new and improved image generator for web designers.

In the past, many web designers used Photoshop’s “Save for Web” feature to optimize and compress images, like the product images being discussed here. While this legacy feature is still available, the new generator does a better job of preparing images for use on the web, and will, typically, output smaller files for the same level of compression.

To demonstrate the new Adobe Photoshop generator, I downloaded Anthony Delanoix’ images available on SnapStock.io under a Creative Commons license. For the sake of the example, imagine that this is a product image for a women’s “Sunset” tee.

Here the example image is in Photoshop CC 2015.

Here the example image is in Photoshop CC 2015.

The original image was 2.53 MB, 3,744 pixels wide, and 5,616 pixels tall at 240 pixels per inch. I resized the image to be more in line with a product image for an ecommerce site, making it 500 pixels wide 750 pixels tall and 72 pixels per inch.

To optimize this image in Photoshop CC 2015, choose File > Export > Export As or you may use a keyboard shortcut, ctrl + alt + shift + w on a Windows computer or cmd + opt + shift + w on an OS X machine.

The new image export feature, which replaced Save for Web, can be opened via the menu or a keyboard shortcut.

The new image export feature, which replaced Save for Web, can be opened via the menu or a keyboard shortcut.

Photoshop will open an export dialog, with options for file type, in some cases image quality, and image resolution.

The export dialog has relatively few setting, which makes it easy to use.

The export dialog has relatively few setting, which makes it easy to use.

Setting the image type to JPEG and image quality to 75 percent, I was able to export the sunset image at just 31.7 KB or about 11,829 pixels per KB.

The exported image was still of good quality and small enough for relatively fast loading.

The exported image was still of good quality and small enough for relatively fast loading.

Photo Processing Scripts

The most efficient and effective way to optimize product images for both beauty and fast loading may be to use a script. Nearly every programming language offers some form of image processing, typically as a library.

While these scripts or libraries absolutely require web development skills, they are often not difficult to use, and they can produce terrific results.

For example, one particularly easy-to-use combination is the Laravel PHP Framework and the Intervention Image library, which works with the GD Library or ImageMagick.

Here are a few examples of popular image processing libraries for several leading coding languages. Each of these offers documentation, explaining how to implement.

PHP:

Python:

Ruby:

Node.js:

Armando Roggio

Armando Roggio

Bio   •   RSS Feed


email-news-env

Sign up for our email newsletter

  1. Asbjoern Andersen July 6, 2015 Reply

    If you’re running WordPress, the WP Smush it plugin is another handy way of reducing your image sizes. If you’ve got a lot of existing images in your webshop, processing them takes a while – but after that’s completed, new images are automatically compressed when uploaded.

  2. Casey July 7, 2015 Reply

    In case anyone didn’t notice, the Hot Topic example is a little misleading, it initially opens the 45K image, but then it loads the 1.5mb image in the background for the zoom. PopFunks problem is not having a mid size image, they load the large one only from the beginning which is just poor functionality.

    • Armando Roggio July 7, 2015 Reply

      Thanks Casey. Walmart is also loading more than one version of the image as needed (for example sometimes it is WebP and sometimes JPG, also it loads different images based on the client size).

      For the article, I decided to just consider the images that displayed in the main image window of a desktop view.

    • Armando Roggio July 8, 2015 Reply

      Casey, since my last comment. They are powering the Walmart solution. Also, I was correct, Walmart is serving different images based on client, device, and connection speed. I will try to get the specifics and possible write an article about it.

  3. Jason Lancaster July 12, 2015 Reply

    Another good tip: Leverage CloudFlare, which will:

    a) compress your images
    b) serve responsive images in a specific size based on the user’s browser…saves bandwidth and improves performance (and it’s cheap).

    Also, for WP users, kraken offers a plugin that will bulk compress images on your site. All you need is an API key.

  4. Eric July 15, 2015 Reply

    I recommend to add optimus.io (https://optimus.io/en/) to the list of online image optimization tools.

  5. Calvin Maxwell July 27, 2015 Reply

    Thanks for great post. If you’re using WordPress, maybe this article is useful:
    http://wpguide.xyz/wordpress-plugins-to-optimize-images/
    Hope you visit my new site :(

  6. Amrit August 4, 2016 Reply

    My photographer took photos with a 24MP camera. The shots are crystal clear but when I reduce the image size in photoshop, there is drastic loss in quality. I’ve read this occurs because pixels are overlapping too much since the reduction in image size is almost 10x. How do I reduce image size (NOT just file size) without this loss in quality?

  7. Zi October 11, 2016 Reply

    Thanks for the post. The Trimage product description said that the “EXIF and other metadata are removed”. Does that weaken SEO efforts like renaming the image with keywords, having alt tags and other SEO techniques?
    Thanks in advance for clarifying.

  8. Linda Williams April 24, 2017 Reply

    Nice list of image optimization tools. If I may, I would also recommend checking out BatchPhoto Espresso.
    http://www.batchphoto.com/espresso/
    It’s a free online tool that has the advantage of editing images in bulk. If you want to resize, crop or rotate more product images at the same time, this tool is definitely worth trying.