A picture may be worth a thousand words, but for online retailers, the right picture format can be worth a few extra conversions. In the highly competitive world of e-commerce, one thing is certain — speed matters.
Study after study shows that customers’ tolerance for slow digital experiences has a meaningful impact on how they spend their online dollars. For example, when Cook reduced average page load time by 850 milliseconds, conversions increased by 7 percent, bounce rates decreased by 7 percent, and pages per session increased by 10 percent.
The Impact of Image Optimization
When retailers look at performance optimization opportunities for their sites, a common large performance gain can be found in the complex world of image optimization. Delivering large, uncompressed or non-optimized image formats can have a dramatic impact on page load time — especially for mobile devices.
Desktop vs. Mobile Formats
Different browsers support different optimized image formats, and different devices expect images to be delivered in various sizes. For example, there's no need to deliver a giant, full-screen desktop image to an iPhone customer. The screen sizes differ vastly and the overly large image is simply wasted bytes — and precious download time!
Different Browsers, Different Image Sizes
Each browser supports various image formats as well, with Google’s Chrome supporting the highly efficient AVIF format, while newer versions of Safari support the WEBP format. These new image formats can have a dramatic impact on the download size, and forces retailers to create multiple copies of their product images in various sizes and format combinations.
Case Study: Kitsch
"At Kitsch, we have hundreds of products, each with dozens of high-quality images and we always want the best image to be delivered to our customers,” said Jeremy Thurswell, chief operating officer of Kitsch, an online seller of designer hair products.
Is image optimization worth the effort? Yes! For example, a standard JPEG on Kitsch's website was shrunk more than 5.5 times by simply using the optimized AVIF format when available. To help ensure every image is optimized for every device, the Kitsch team enabled Edgemesh’s automatic image optimization, which transparently re-encodes and optimizes every image in the Kitsch catalog — in real time — based on the device type.
Edgemesh Server does this by looking at the base page and the requesting device and delivers — on the fly — the correct image format and size.
"In the past, we used third-party tools to optimize every image for differing sizes and formats," Thurswell noted. "Now, we can simply sit back and let Edgemesh handle that process, which frees our developers to focus on other areas to delight customers. It's a huge time saver and cost reduction."
Let’s break down a few of Kitsch’s metrics in terms of some of Google’s Core Web Vitals. For Kitsch, the First Contentful Paint (FCP) — a metric that describes the time it takes to take a blank page and deliver the first beginnings of page load — dropped from 2.35 seconds to 1.5 seconds.
The impact continues as the page loads, with the Largest Contentful Paint (LCP) — which describes the time taken to deliver the hero image — dropping from 3.25 seconds to 2.6 seconds. The LCP is especially important to search engine optimization, as faster sites achieve a higher ranking.
These dropped times show that the image optimization directly helped speed up the experience for all customers worldwide. With web pages now delivering smaller, more efficient images for every device they load, time has improved dramatically — leading to increased conversions.
Jake Loveless runs Edgemesh, the global web acceleration company he co-founded with two partners in 2016. Edgemesh helps e-commerce companies across multiple industries and platforms (including headless) deliver 20 percent to 50 percent faster page loads to billions of users around the globe.
Related story: The Not-So-Hidden Cost of Headless E-Commerce
Jake Loveless has had a twenty-year career in making things go faster—from low latency trading for Wall Street to large-scale web platforms for the Department of Defense. He is a two-time winner of High-performance Computing awards and a frequent contributor to the Association of Computing Machinery. Today, Mr. Loveless runs Edgemesh, the global web acceleration company he co-founded with two partners in 2016. Edgemesh helps eCommerce companies across multiple industries and platforms (including headless) deliver 20-50% faster page loads to billions of users around the globe.