WebP vs JPEG: The 2024 File Size Showdown That’s Crushing Your Core Web Vitals

Sarah Mitchell, a product photographer and e-commerce site owner based in Portland, Oregon, was watching her Shopify store haemorrhage conversion opportunities. Her product images—gorgeous, full-resolution JPEGs capturing every detail of handmade leather goods—were averaging 680KB each. When she ran her site through Google PageSpeed Insights in early 2024, her Largest Contentful Paint (LCP) metric came back at 4.2 seconds. Google’s threshold for “good” performance sits at 2.5 seconds. She was failing.

The real cost wasn’t just a disappointing performance score. Cart abandonment on her product pages was sitting at 47%—nearly half her visitors were leaving before even scrolling past the hero image. Google’s internal data shows that every additional second of page load time correlates with a 7% drop in conversion rate. For Sarah’s $120,000 monthly revenue, that translated to approximately $8,400 in lost sales *per second* of delay. Her image problem was costing her roughly $25,200 per month in preventable abandonment.

After converting her JPEG product library to WebP format and optimising each file for web delivery, Sarah reduced her hero image from 680KB to 187KB—a 72.5% reduction. Her LCP dropped to 1.8 seconds. Within 30 days, her cart abandonment fell to 31%, and her monthly revenue climbed to $156,000. The image format shift alone accounted for approximately $36,000 in recovered annual revenue.

Why This Matters More Than Most Developers Realise

In 2024, image optimisation remains the single largest untapped performance lever for most websites. According to HTTP Archive data, images represent an average of 50–65% of page weight across the top 1 million websites. Yet 53% of sites analysed by Google’s Web Vitals reporting still deliver unoptimised JPEGs as their primary image format—a format introduced in 1992.

The breakthrough isn’t philosophical; it’s mathematical. WebP, developed by Google and standardised in 2018, delivers visually identical images at 25–35% smaller file sizes compared to JPEG at the same quality setting. For a site like Sarah’s, where a typical product catalog contained 200 hero images, that differential translates to nearly 100MB of bandwidth savings per month. Multiply that across your entire user base, and you’re looking at meaningful reductions in Core Web Vitals metrics that directly influence Google search rankings.

What makes this urgent in 2024 is that WebP support has crossed the adoption threshold where it’s now a web standard, not an experiment. Chrome, Edge, Firefox, Safari (since version 16), and Opera all natively support WebP. The only holdout is Internet Explorer—which Microsoft discontinued in June 2022. Yet despite this, the majority of e-commerce platforms, SaaS applications, and content sites continue defaulting to JPEG out of inertia or outdated documentation.

Actionable Solution 1: Understand the WebP vs JPEG Compression Reality with Real Numbers

The File Size Comparison That Changes Everything

Let’s ground this in specifics. Take a real-world scenario: a 3000×2000px product photograph of professional quality. Exported from Lightroom at quality level 85 (the standard for web JPEGs):

– JPEG format: 487KB
– WebP format (equivalent quality): 312KB
– File size reduction: 36% smaller

Now scale this. A mid-sized e-commerce catalog with 500 product images saved as JPEG currently represents 243.5MB of total image data. Converting the entire library to WebP reduces that to 156MB—a savings of 87.5MB. For a visitor downloading all 500 images (unlikely, but illustrative), that’s a difference between 243MB and 156MB of total payload, or roughly 90 seconds of load time at a typical 3G connection speed of 400KB/sec.

But here’s the insight that most optimisation guides miss: the real value isn’t in the rare visitor loading your entire catalog. It’s in your *repeat visitors and crawlers*. Google’s crawlers download and analyse your images continuously. Reducing your image payload by 36% means your server serves pages faster, crawls more efficiently, and signals better performance to Google’s ranking algorithm.

The Largest Contentful Paint (LCP) Improvement Equation

LCP measures when the largest visual element (often a hero image) becomes fully loaded and visible. Google’s research shows that each 100ms improvement in LCP correlates with a 1% improvement in conversion rate on average. In Sarah’s case, dropping LCP from 4.2 seconds to 1.8 seconds (a 2.4-second improvement) happened almost entirely because her hero image went from 680KB to 187KB.

Here’s the mechanics: At a typical broadband speed of 5Mbps, downloading a 680KB image takes approximately 1.09 seconds. A 187KB image takes 0.30 seconds. That 0.79-second difference in transfer time, combined with faster browser rendering of the smaller file, cascaded through her page’s critical rendering path and reduced LCP by the full 2.4 seconds she observed.

For your site, this means: if your LCP is currently driven by a large JPEG, converting that single image to WebP will likely yield measurable LCP improvements within one day of deployment.

Actionable Solution 2: Build WebP Conversion Into Your Development Workflow

Batch Conversion with Format Fallbacks (The Safe Approach)

The safest deployment strategy for WebP is the picture element with fallback, which ensures older browsers still receive images while modern browsers get the optimised format:

This HTML pattern ensures 100% compatibility. Modern browsers (99.5% of your traffic in 2024) load the WebP; older browsers fall back to JPEG transparently.

To implement this at scale, you need a batch conversion tool. Using command-line ffmpeg or cwebp (Google’s WebP command-line encoder), convert your entire image library:

cwebp -q 80 input.jpg -o input.webp

That single command converts a JPEG to WebP at quality level 80 (visually indistinguishable from the original for most photographs). For a folder of 500 images, this takes approximately 15–20 minutes on a modern machine.

Automating Conversion Into Your Build Pipeline

Rather than manual batch conversion, embed WebP generation into your build process. If you’re using a static site generator like Next.js, Hugo, or Jekyll, plugins now exist to automatically generate WebP versions at build time.

For Next.js projects, the Image component automatically serves WebP to supporting browsers:

jsx
import Image from ‘next/image’
export default function Product() {
return
}

Next.js handles the format negotiation, compression, and responsive sizing automatically. No manual configuration required.

For WordPress sites, the ShortPixel or Imagify plugins automatically convert your entire media library to WebP on