WebP is an image format Google released in 2010 to make web images smaller. One format can do what used to need three: photo-style lossy compression like JPEG, pixel-perfect lossless compression with transparency like PNG, and animation like GIF. Every current major browser can display it.
What makes WebP files smaller
Lossy WebP is based on the way the VP8 video codec compresses a single frame. Instead of encoding each block of the image on its own, it predicts a block from the pixels around it and stores only the difference, which is often small. Lossless WebP uses a separate set of techniques, including colour caching and reusing repeated patterns from elsewhere in the image. Both modes can include an alpha channel for transparency, and lossy images with transparency are something neither JPEG nor PNG can do in one file.
How much you save depends on the picture and the settings, so test your own images rather than trusting a headline figure. Google's own comparisons report noticeably smaller files at similar visual quality.
Example: speeding up a product catalogue
An online plant shop has 300 product photos uploaded as PNG because that was the default in the owner's editing app. Running them through Squoosh or the cwebp command-line tool at a lossy quality setting makes each image a fraction of its size with no visible change at the size shown. Category pages load faster, and the main image appears sooner, which feeds into Largest Contentful Paint.
Many hosting platforms and image services, such as Cloudflare Images or Next.js image optimisation, can convert to WebP automatically and serve it only to browsers that ask for it.
When WebP matters for you
If your site has more than a handful of photos, serving WebP is one of the cheapest speed wins available. Browser support stopped being a concern once Safari added it in 2020. It matters less in email, where support is patchy, and for files people download and open in desktop software, where JPEG and PNG are still safer. AVIF is a newer format that often compresses even better, and the picture element lets you offer AVIF, then WebP, then JPEG as fallbacks.
Common WebP mistakes
- Converting an already compressed JPEG at high quality. You stack two rounds of loss and may get a bigger file. Convert from the original where possible.
- Keeping giant dimensions. Format changes do not fix a 5000-pixel image displayed at 500 pixels; resize first.
- Using WebP in email newsletters. Some clients will not render it.
- Assuming lossless is always smaller than PNG. Usually true, not guaranteed; check the output.
Related terms
- JPEG: the photo format WebP most often replaces.
- PNG: the lossless format WebP can also replace.
- GIF: animated WebP is a lighter alternative.
- Core Web Vitals: lighter images help the loading metric.