Why WebP matters for performance
Images typically account for 50–70% of a page's total download weight, and their format choice directly impacts load time and Core Web Vitals scores. WebP was developed by Google to address the limitations of JPEG and PNG — the two formats that dominated the web since the 1990s. The result produces files roughly 25–35% smaller than JPEG at equivalent visual quality, and 26% smaller than PNG for transparent images.
Browser support for WebP has been near-universal since 2022, covering Chrome, Firefox, Safari, Edge, and all major mobile browsers. There is now a strong case for making WebP your default format for web images.
How WebP compression works
JPEG compression divides images into 8×8 pixel blocks and applies a discrete cosine transform. This works well for photos but creates characteristic artefacts: blocking at block boundaries, ringing halos around sharp edges, and colour banding in smooth gradients.
WebP uses a predictive coding method adapted from the VP8 video codec. It analyses larger regions and predicts each block based on neighbouring areas before encoding. This is more computationally expensive but produces better results at the same file size — especially for fine detail, edges, and gradients.
WebP also supports lossless compression and transparency in the same format. A single WebP file can be lossy, lossless, or animated — versatility JPEG cannot match.
Real file size numbers
In my testing across typical web images — product photos, hero images, thumbnails — WebP consistently produces files 28–38% smaller than JPEG at equivalent quality. For a site with 50 images on the homepage, this can reduce page weight from 3.2MB to 2.1MB from format switching alone. For transparent images, WebP is often 60–70% smaller than equivalent PNG.
Serving WebP with JPEG fallback
The cleanest implementation uses the HTML picture element:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Description">
</picture>The browser tries the WebP first; very old browsers fall back to JPEG. The img tag serves as both the fallback and the alt text source.
When not to use WebP
Email clients have very inconsistent WebP support — for email images, stick with JPEG and PNG. Some social media platforms still require JPEG or PNG uploads (they re-encode anyway). For print workflows, use TIFF or high-resolution PNG. For everything else served in a browser, WebP is the right default in 2026.