What is WebP?
WebP is a modern image format developed by Google, released in 2010 based on the VP8 video codec. It was designed as a single format to replace both JPEG (lossy photos) and PNG (lossless + transparency) on the web.
The core advantage: significantly smaller files at equivalent visual quality.
WebP vs JPEG vs PNG: Numbers
| Format | Relative size | Transparency | Animation | Lossless |
|---|---|---|---|---|
| JPEG | 100% (baseline) | ❌ | ❌ | ❌ |
| PNG | 150-300% | ✅ | ❌ | ✅ |
| WebP (lossy) | 65-75% | ✅ | ✅ | ❌ |
| WebP (lossless) | 74-85% vs PNG | ✅ | ✅ | ✅ |
| AVIF | 40-60% | ✅ | ✅ | ✅ |
Real example — a 1920×1080 product photo:
- JPEG at 85%: 420 KB
- PNG: 1.8 MB
- WebP at 85%: 280 KB (−33% vs JPEG)
WebP Features
Lossy and Lossless Modes
Unlike JPEG (lossy only) and PNG (lossless only), WebP supports both:
- Lossy WebP: like JPEG, uses the VP8 codec. Best for photographs.
- Lossless WebP: like PNG, preserves every pixel. Better compression than PNG for most images.
- Mixed: different regions of the same image can use lossy or lossless compression.
Full Alpha Channel (Transparency)
WebP supports 8-bit alpha transparency — the same as PNG. This makes WebP a direct replacement for PNG in web contexts.
Lossy WebP with transparency produces files 3× smaller than the equivalent PNG.
Animated WebP
WebP supports animation as a replacement for GIF — with far better compression and full-color support (GIF is limited to 256 colors).
A 5-second GIF at 400px wide might be 8 MB. The same animation as WebP: ~500 KB. A 16× reduction.
Browser Support in 2024
| Browser | WebP Support Since |
|---|---|
| Chrome | 2011 (version 9) |
| Firefox | 2019 (version 65) |
| Edge | 2018 (version 18) |
| Safari | 2020 (version 14 on macOS, iOS 14) |
| Opera | 2013 |
| Samsung Internet | 2016 |
Global coverage: ~96% of all browser users as of 2024.
The remaining 4% is primarily users on very old iOS (< 14) or legacy browsers. For most projects, WebP without fallback is acceptable.
Implementing WebP on Your Website
The <picture> Element (Recommended)
Serve WebP to browsers that support it, JPEG/PNG to others:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Product photo" loading="lazy" width="800" height="600">
</picture>
The browser downloads only the first format it supports — not both.
CSS Background Images
/* Feature detection with CSS */
.hero {
background-image: url('hero.jpg');
}
/* Chrome, Firefox, Edge — served via JS class on <html> */
.webp .hero {
background-image: url('hero.webp');
}
Or use Modernizr to add a .webp class to <html> automatically.
Next.js, Nuxt, Astro
Modern frameworks handle WebP automatically:
// Next.js — automatically serves WebP when supported
import Image from 'next/image';
<Image src="/product.jpg" alt="Product" width={800} height={600} />
Converting Images to WebP
Online:
- JPG to WebP
- PNG to WebP
- GIF to WebP — animated WebP
Command line (cwebp):
# Install: brew install webp (Mac) or sudo apt install webp (Linux)
# Convert with quality 85
cwebp -q 85 image.jpg -o image.webp
# Lossless
cwebp -lossless image.png -o image.webp
# Batch convert all JPGs
for f in *.jpg; do cwebp -q 85 "$f" -o "${f%.jpg}.webp"; done
Build tools:
- Vite: use
vite-plugin-imagemin - Webpack: use
image-minimizer-webpack-plugin - Sharp (Node.js):
sharp('input.jpg').webp({ quality: 85 }).toFile('output.webp')
WebP vs AVIF: Should You Switch?
AVIF (2019) offers even better compression than WebP — typically 30-50% smaller. But encoding is much slower and browser support, while growing, is at ~90%.
Use WebP when:
- You need broad compatibility (including iOS 14-15 users).
- Build times matter (WebP encodes fast).
- You're replacing an existing JPG/PNG pipeline.
Use AVIF when:
- You're targeting Chrome/Firefox primarily.
- You have time to encode (or use cloud CDNs that auto-convert).
- Maximum compression efficiency is the priority.
Many high-traffic sites (Etsy, Facebook, Google) use both:
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="Product">
</picture>