Run A/B tests and personalize your store without code. 14-day free trial, no credit card.
Start free trial →In-depth guides and case studies where this concept is put to work.
Image optimization is the practice of reducing the file size and delivery cost of images without a visible loss in quality. It covers format selection, compression, correct dimensions for the display context, responsive delivery for different screens, and controlling when images load.
On an ecommerce site it matters more than almost anywhere else, because images are simultaneously the heaviest thing on the page and the most important. A product page cannot solve its performance problem by using fewer or worse pictures — shoppers buy what they can see.
Images typically account for the majority of page weight on a product page, often well over half. They are also usually the Largest Contentful Paint element, which means image loading time is effectively the page's perceived load time as far as both visitors and Google are concerned.
The common failure is uploading images at their original resolution and letting the browser resize them. A 3000×3000 pixel photograph displayed in a 400-pixel-wide slot on a phone downloads the full file and then throws most of it away — the visitor pays for data and waiting time they get no benefit from. On a 4G connection in an area with patchy coverage, that is the difference between a sale and a back button.
Layout shift is the second cost. Images without declared dimensions cause content to jump as they load, and on a product page that frequently means the add-to-cart button moves just as someone reaches for it. That produces mis-taps at the worst possible moment.
There is a real tension to manage: heavily compressed images that look flat or artefacted damage perceived product quality, particularly in categories like apparel, jewellery, and beauty where the photograph is doing much of the selling. The aim is invisible compression, not maximum compression.
A jewellery brand's product pages carried eight images each at roughly 1.2MB apiece — nearly 10MB per page. Mobile LCP was 6.2 seconds and the mobile conversion rate was 0.4%.
They converted to WebP with a JPEG fallback, generated responsive sizes for common breakpoints, applied compression tuned per image rather than a blanket setting, lazy-loaded everything below the first image, and set explicit dimensions on all of them.
Page weight fell to about 1.1MB, mobile LCP to 2.3 seconds, and mobile conversion rate rose to 1.1%. Because the compression was tuned rather than uniform, the images looked the same to the eye — which mattered in a category where the photography is the product.
srcset handles this.Image work produces two testable questions, and they are worth separating. The first is performance: does a faster page convert better? Measure that as a straightforward before-and-after or a proper split, watching mobile conversion rate and bounce rate.
The second is content: which images convert best? Number of images, model versus flat-lay photography, lifestyle versus studio, video presence, and gallery order are all worth testing, and the answers differ sharply by category. Run both kinds of test — a faster page showing the wrong images is not an improvement. CustomFit.ai supports testing image content and gallery arrangement on product pages without theme code changes.
Run smarter A/B tests with CustomFit.ai — 14-day free trial, no credit card required.