Everything you need to know about WEBP
WebP (.webp) is Google's modern image format, released in 2010. It supports lossy AND lossless compression, transparency, animation, and color profiles - all in one format. WebP files are typically 25-35% smaller than equivalent JPG/PNG, making it the smartest choice for modern web image delivery.
How it works under the hood
- Two compression modes. Lossy WebP uses VP8 video codec's intra-frame compression. Lossless WebP uses a custom predictor with backward referencing.
- Alpha channel everywhere. Both lossy and lossless WebP support transparency - lossy WebP with alpha is something JPG can never do.
- Animation built-in. Animated WebP replaces GIF with full color, alpha, and ~50-90% smaller files.
- Browser support is universal as of 2020. Chrome (since 2010), Firefox (since 65), Safari (since 14), Edge - all modern browsers handle WebP. Only IE11 and very old Safari miss it.
Where you'll actually use it
- Modern web image delivery (default for new sites)
- Mobile apps where bandwidth and storage matter
- E-commerce product photos (smaller = faster pages = better SEO)
- Animated images replacing GIF
How it compares to alternatives
WebP vs JPG: WebP is 25-35% smaller at same quality. WebP vs PNG: WebP-lossless is ~26% smaller than PNG. WebP vs AVIF: AVIF compresses better (~40% smaller than WebP) but encoding is much slower and Safari support is newer.
Things that will trip you up
- Email clients still don't support WebP - send JPG/PNG for email graphics
- Adobe Photoshop didn't natively support WebP until version 23.2 (2022)
- Some legacy CMS won't accept .webp uploads - check before committing your asset pipeline
Test it yourself: Chrome DevTools shows WebP delivery. `cwebp` and `dwebp` from Google's libwebp for command-line conversion. ImageMagick supports WebP via libwebp.