Ecommerce marketing company Springbot, who lives just down Peachtree Rd from Rigor HQ, recently posted to their blog that “Social marketing…is all about the visual marketing.” With that in mind, one would think that eCommerce companies would use more and more images, but that’s not the case. In fact, as the chart below illustrates, the number of images per page that eCommerce companies are deploying has remained flat. However, the size of those images has changed dramatically.
As it turns out, those big beautiful marketing images have quite a large impact on website performance, but again, not because there are more images. Despite the fact the number of images served has stayed flat, average image weight on a webpage has increased from .6 MB to nearly 1.4 MB (more than 130%!) since November 2011.
Images are beautiful, but when you increase the size of an image by that much, it will naturally take longer to load, slowing down the eCommerce page’s load time, and possibly driving away potential customers.
But it doesn’t have to be that way. The human eye is very fast, but when it comes to detecting differences in the quality of images, we really can’t tell (especially on a 4-5” screen). To illustrate this point, look at the two images below. The images are identical, but the image on the left (a PNG file) is approximately 718k whereas the image on the right (a JPG file) is 52k, a difference in size of about 93%. Furthermore, the image on the left has 148,279 colors. The image on the right has 72,060 colors. The human eye cannot tell the difference.
Even though these two images look the same to you and me, a web browser can tell the difference and loads a 52k JPG much faster than a 718k PNG image. This reduction is an example of a lossy optimization because it reduces the amount of graphics data in the file. However, there are plenty of ways to optimize an image with lossless compression techniques that strip away unnecessary meta data stored in the image file.
Now, when we consider that, according to leading SMB shopping cart software provider Shopify, more high quality images for your products lead to better conversions on your ecommerce site, it may seem like eCommerce operators have to choose between sales and website performance. But that does not have to be the case. Reducing a single image file by 93% is just one example of how eCommerce companies can maintain a very high quality image library without sacrificing web performance because of those images.
The best way to maintain this balance between high quality imagery and high level web performance is to actively monitor your website to detect unusually large images and optimize those images prior to deployment.