The following is a guest blog from Zoompf CEO Mark Isham.
For the e-commerce retailer, high quality images are critical to a positive buying experience. Rich, clear imagery can often make or break a successful sale. Of course as with everything in life, this comes at a cost.
Did you know that images represent over 60% of the total size of a typical storefront page? Such a large footprint can inevitably lead to performance problems. Simply put: the larger your page size, the slower it loads for your customers - and it only gets worse on mobile. And of course the slower the page loads, the more likely your customers will choose to shop elsewhere.
In a landmark study conducted by Amazon, it was shown that each 100 ms delay in page load times led to a 1% loss in sales. A more recent case study by Intuit found that each 1 second improvement in page load times yielded a 3% increase in conversion rates. This stands to reason, as a slow online store is not just annoying to your customers, but causes a real and quantifiable drop in traffic conversions to sales. If you're curious, you can check out even more studies in our archive.
While there are many great things you can do to improve the performance of your e-commerce store, this article focuses on the one most directly under your control: optimizing your product images. When done properly, optimizing your product images can make a significant improvement to your user experience, with little or no impact to visual clarity.
To see other optimizations you can make to your online store, also check out our article How to Improve Your Conversion Rates with a Faster Website.
Lossless Image Reduction
By this point, you may be thinking "This is all well and good, but I need my images to look good!". Here's the good news, in many cases you can reduce the size of your images by 20% or more without ANY impact to visual quality. This is not some subtle trick that is open to interpretation by the viewer, this is the exact same image...minus the extra "junk" that has nothing to do with how the image looks. This is called "lossless" image optimization.
How is this possible?
Many people don't realize that a typical image file is stored with a lot of extraneous information that has nothing to do with the display of the image itself. For example, here's the layout of an example PNG image:
Depending on the tool used to create the image, a typical image file can have embedded comments, thumbnails, unused palette entries, tool metadata and more. This information is all useful to the designer when they edit the image in their favorite tool, but is completely extraneous and unnecessary for your customers. In some cases, you could save over 100 kb in size on just 1 optimized 500 kb image!
Yahoo has a great free lossless image optimizer called Smush.it, check it out. Still keep a copy of your original image files (that extra information is useful to your designer's tools after all), but before publishing those images, run a new copy through Smush.It and use that version for your customers.
Choose the Right File Type
While one image file type may look like any other to you, the choice you make can have a dramatic impact on the size of your file. Consider these recommendations when choosing your image file type:
The PNG file type is ideal for logos and computer art, images with sharp edges and contrast. PNG files also have the extra benefit of supporting transparency, which is a valuable (although sometimes overused) tool in the web designer's arsenal. Beware, though, the PNG file format is TERRIBLE for photographs. You know: pictures with many colors and soft diffusion. This is where the JPEG format shines.
Use JPEG images for photos, easy as that. While JPEG images don't support transparency, the savings you get by using the correct format will be well worth the sacrifice. Consider the following example:
A huge difference in size with undetectable differences in the image.
Beware, though, as unlike PNG images, JPEGs images are what's called "lossy images," meaning you can save at different quality levels that can impact the visual clarity. If you lower that quality level too far, the savings will be outweighed by a grainy or fuzzy picture. This is where your designer has a right to complain, so choose a quality level that is a good balance between speed and appearance. We recommend selecting a JPEG quality in the 50-75 range. Consider the following example and see if you notice the difference:
WebP is a new image format introduced by Google that in many ways has the best of both worlds between PNG and JPEG images. Lossless AND lossy images are at least 25% smaller than their PNG or JPEG counterparts, and it supports transparency. The downside: WebP images are not yet universally supported. While Chrome natively supports WebP, older browsers and tools require plugins to support this format.
For this reason, we do not currently recommend using WebP unless you configure your website to conditionally serve different image types based on the browser of your customer. This is an advanced optimization, so to keep it simple we recommend waiting until WebP is natively supported by a broader set of the tools used by your customers.
You can read more about WebP on Google's developer site.
All the Rest
These days there's generally no good reason to use BMP, GIF, TIFF and other legacy formats unless you have a very niche use case. GIF images do support animation which is nice in some circumstances, but otherwise we'd recommend sticking with PNG and JPEG files. BMP files are not compressed in any way; avoid them like the plague!
Your product images can represent 60% or more of your total page size. By optimizing your images just 20%, you can save hundreds of kb of size on your webpage, which in turn can save seconds off your download times. Each second gained can improve your conversion rates by 3% or more! This is time well spent.
We make the following recommendations to optimize your images:
- Use a tool like Yahoo's Smush.It to losslessly optimize your images, or reduce without any loss of visual quality.
- Use PNG images for logos and computer art, JPEG images for photographs.
- Use a JPEG image quality of 50-75, depending on your taste. No more, no less.
Once your images are well optimized, we recommend using a tool like ChannelAdvisor's RichMedia to improve the user experience for your customers, including zoom, panning, and even a 360 degree viewer.
If you want to see more tips on how you can optimize the performance of your images and many other aspects of your storefront, check out the Free Website Performance Report offered by Zoompf.
Mark Isham is CEO of Zoompf, the leader in web performance optimization for e-commerce retail web and mobile sites. Prior to Zoompf, Mark worked as a senior engineering leader at ChannelAdvisor for over 12 years, where he worked closely with top e-commerce retailers to improve their online sales through the ChannelAdvisor platform. You can check out more performance best practices from Mark and his team on the Zoompf Blog.