Performance
WebP
WebP is an image format from Google that compresses photos and graphics into smaller files than JPEG or PNG at similar visual quality. It supports lossy, lossless, transparency, and animation.
How it is measured
Compare file sizes at matched quality. A photo that is 240 KB as a JPEG at quality 80 often comes out at 150 to 180 KB as WebP, 25 to 35% smaller. Check for `content-type: image/webp` in the response, and use Lighthouse's 'Serve images in next-gen formats' for savings.
Browser support is now broad, so the question is the pipeline: where encoding happens (build step, CMS plugin, or an image CDN that negotiates on `Accept`) and whether you keep `<picture>` fallbacks for old clients.
Worked example
A real-estate site has 30 listing thumbnails at 400 by 300 pixels as JPEG, 46 KB each, so the grid weighs 1.4 MB. Converted to WebP at quality 75, they average 27 KB and the grid weighs 0.8 MB.
On a throttled 4G run the grid's images finish loading 1.3 s sooner, and the LCP thumbnail moves from 2.9 s to 2.3 s.
How it differs
WebP is widely supported and encodes quickly. AVIF compresses better, often another 20 to 30% smaller, but encodes more slowly and has patchier tooling. WebP wins on compatibility and build time, and AVIF wins on bytes for photographs.
Common errors
Re-encoding a JPEG that was already heavily compressed. Converting but forgetting to resize or add `srcset`. Choosing quality 100. Converting screenshots with sharp edges using lossy settings. Forgetting to purge the CDN. Serving WebP with the wrong MIME type.
In practice
Pick the images that dominate your page weight, convert them to WebP at about quality 75 to 80, and check them by eye. Let your image CDN or build plugin handle it automatically. Compare page weight and LCP before and after.