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.
As mobile devices continue to play a more prominent role in our 21st century society, their usefulness has spread beyond the casual activities of technological enthusiasts. According to research conducted by FUNDtech, a rapidly growing number of ba...Read More
E-commerce is a growing source of revenue for many companies and businesses, as it continues to capture market-share from brick-and-mortar stores over recent years. However, many businesses are not prepared for this growth of online business becau...Read More
In recent years, client-side browsers have been more involved with processing code before it reaches the user's desktop, shifting away from a reliance on servers handling the bulk of this burden. Websites and applications now rely more on a user's br...Read More
Because of the multifarious nature of web clients today, it’s important to consider the usage statistics when designing, implementing, and managing your site. However, misconceptions often arise when determining what browsers to design for an...Read More