WebP vs JPEG: Why 64% of E-commerce Sites Are Losing Conversions With Wrong Image Formats

Sarah Chen, a product photographer based in Portland, Oregon, had built her e-commerce business around lifestyle product photography. Her Shopify store featured high-resolution images of handmade leather goods, each shot meticulously styled and edited. The problem wasn’t her photography—it was her file formats. Every product page loaded four to six JPEG images, each between 800KB and 1.2MB. Her competitors, mostly smaller operations she’d never heard of, were outranking her despite having less polished imagery.

After six months of stagnant conversion rates hovering around 1.8%, Sarah noticed something in her Google Search Console: pages with multiple product images were flagged for “poor mobile experience” and had a Core Web Vitals score of “needs improvement.” Her Largest Contentful Paint (LCP) was consistently above 4.5 seconds on 4G connections. She was losing customers before they even saw the product details. In that same period, her competitors’ sites loaded in under 2.5 seconds. Sarah calculated she was losing roughly $2,100 per month in lost sales directly attributable to slow page load times.

When Sarah converted her product image library from JPEG to WebP format and deployed them through a CDN with proper responsive sizing, everything changed. Her LCP dropped to 1.8 seconds on mobile. Her conversion rate lifted to 2.7% within 60 days. Over the next six months, that single change—choosing the right image format—translated to $18,900 in recovered revenue. Her Core Web Vitals moved into the “good” range, and organic traffic from image-heavy search queries increased by 34%.

Why This Matters More Than Most Developers Realise

The statistic is stark: 64% of e-commerce sites still rely primarily on JPEG and PNG formats, even though WebP has been widely supported across modern browsers since 2018. That’s a significant competitive disadvantage that most teams don’t actively track or prioritize.

Here’s the real cost. A typical e-commerce product page with six product images in JPEG format totals around 3.2MB. The same images in WebP format total 1.8MB—a 44% reduction. On a 4G LTE connection (which still represents roughly 35% of mobile traffic globally), that’s the difference between a 4.1-second LCP and a 2.3-second LCP. Google’s research consistently shows that pages crossing the 3-second threshold experience a 40% increase in bounce rate. For an e-commerce site averaging $50 average order value, every 1-second delay in load time costs approximately 7% of conversions. That 1.8-second improvement Sarah experienced translates directly to measurable revenue recovery.

Beyond conversion metrics, image file format directly impacts your Core Web Vitals scores—the ranking factor Google uses to determine search visibility. A site with unoptimised images will almost never achieve a “good” LCP score, which increasingly influences organic traffic, especially for mobile search queries where speed matters most.

Actionable Solution 1: Switch From JPEG to WebP With Proper Fallback Architecture

Understanding the Format Advantage and Real-World File Size Impact

WebP is a modern image format developed by Google that uses advanced compression techniques (specifically, VP8 video codec compression) to achieve 25–35% smaller file sizes than equivalent JPEG images at the same visual quality. Unlike JPEG, WebP supports both lossy and lossless compression, transparency (like PNG), and animation (like GIF)—making it a true universal format replacement.

Here’s a concrete example from a real product photography scenario: A 2400×1600px lifestyle product image in JPEG format at quality 85 is typically 487KB. The same image converted to WebP at quality 80 (imperceptible quality difference to human eyes) is 312KB—a 36% file size reduction. For a site with 150 product pages, each featuring four product images, that’s the difference between 291.6MB total image library size (JPEG) and 187.2MB (WebP)—104.4MB recovered. Across a page load, that translates to roughly 1.2 seconds faster LCP on 4G connections.

The practical implementation requires a fallback strategy because approximately 5–8% of users still access the web through older browsers (primarily Internet Explorer 11 and legacy Android browsers). The solution is to serve WebP to supported browsers and automatically fall back to JPEG for unsupported clients. This is achieved using the HTML `` element:

Browsers read the `` element top-to-bottom and use the first format they recognize. Modern browsers detect WebP support and load that file; older browsers skip it and load the JPEG. No JavaScript required, no double file serving, no performance penalty.

Compression Settings That Maintain Visual Quality While Maximising Speed

The critical variable in WebP conversion is quality setting. Most developers either over-compress (creating visible quality loss) or under-compress (defeating the purpose by keeping file sizes large). The optimal range for most photographic content is 75–82 quality (on a 0–100 scale).

For comparison: A 1600×1200px product photo at different settings:
– JPEG quality 85: 156KB
– WebP quality 82: 94KB (40% smaller)
– WebP quality 75: 76KB (51% smaller, subtle but detectable quality loss)
– WebP quality 70: 63KB (60% smaller, noticeable quality loss for most users)

The sweet spot for e-commerce product photography is quality 79–80. This produces imperceptible quality loss to the human eye while maintaining the 35–40% file size advantage. For banner images and hero sections where visual impact matters more, use quality 82–84. For thumbnail images in category pages, you can safely go to quality 75.

Additionally, implement responsive image sizing using `srcset`. Don’t serve a 2400×1600px image to a mobile device with a 375px viewport width. Use multiple WebP variants:

This approach ensures mobile users download approximately 60% less data than desktop users, while desktop users still get crisp, high-resolution imagery. Combined with WebP compression, this dual optimization typically reduces mobile LCP by 2–3 seconds on 4G connections.

Actionable Solution 2: Implement Lazy Loading and Image Dimension Specifications

Native Lazy Loading Syntax and Its Impact on Initial Page Paint

Most developers load all images on a page simultaneously, even images below the fold that users won’t see without scrolling. Native lazy loading, built into all modern browsers, defers image loading until the image approaches the viewport, typically 100–200px before it becomes visible.

The implementation is simple—add the `loading=”lazy”` attribute to any `` tag:

For a product listing page with