How WebP Cuts Bandwidth and Speeds Up Mobile

Images are usually the heaviest part of a web page, so cutting their size with WebP directly reduces bandwidth and speeds up loading — most noticeably on mobile networks. Smaller images mean a faster Largest Contentful Paint, lower data costs for users, and a smaller CDN bill. This guide quantifies the effect and explains where it matters most.

For the metrics, see Core Web Vitals & Images. For the format, see What is WebP?.

How much bandwidth does WebP save?

WebP saves 25–34% of image bandwidth versus JPG and around 26% versus PNG, at equivalent quality. Because images dominate page weight, that translates into a similar reduction in total bytes transferred for most image-heavy pages. Across many visits, the cumulative data saving is large.

A page with 2 MB of JPG images drops to roughly 1.3–1.5 MB of WebP — a saving repeated on every page load.

Why does WebP matter most on mobile?

WebP matters most on mobile because mobile networks are slower and less reliable, so every saved kilobyte shortens load time more. A smaller image set reaches the device faster on 4G or congested connections, improving the Largest Contentful Paint that mobile users — and Google's mobile-first index — experience.

Mobile devices also often have data caps, so lighter pages cost users less. The performance gain is largest exactly where the audience is largest.

How does WebP affect Largest Contentful Paint?

WebP improves Largest Contentful Paint by shrinking the bytes of the LCP image, which is often a hero photo. A smaller hero downloads and renders sooner, frequently moving a page from a failing LCP into the green threshold. Sites migrating large JPG heroes to WebP commonly see LCP improvements of 200–500 ms.

LCP is the Core Web Vital WebP most directly affects. The full treatment is in Core Web Vitals & Images.

Does WebP reduce CDN and hosting costs?

WebP reduces CDN egress and hosting bandwidth roughly in proportion to the image-size saving. If images are the bulk of your transferred bytes, a 30% image reduction cuts a meaningful share of metered CDN cost. The saving recurs with every request served.

Automatic conversion at the edge captures this without re-encoding your originals — see WebP and CDNs and How to Enable WebP on Cloudflare.

How do you maximise the bandwidth saving?

Combine WebP with responsive sizing and lazy loading so each device downloads only the bytes it needs. WebP shrinks each file; responsive srcset sends small screens small images; lazy loading defers off-screen images entirely. Together they cut far more than format alone.

The techniques:

Format — convert to WebP; see WebP Optimisation.
Responsive sizing — srcset and WebP.
Lazy loading — WebP Lazy Loading.

Where to go from here

WebP turns image weight — the biggest part of most pages — into a 25–34% bandwidth saving felt most on mobile. Pair it with responsive sizing and lazy loading to cut data, speed up LCP, and lower CDN costs.