WebP
An image format by Google that provides 25-35% smaller files than JPEG at similar quality, with support for transparency (like PNG) and animation (like GIF). Supported by all modern browsers.
Full Explanation
WebP gives you smaller images with no visible quality loss. A typical JPEG at quality 80 becomes 25-35% smaller as WebP at equivalent visual quality. For a site serving thousands of images, that's significant bandwidth savings and faster page loads.
CDNs often handle WebP conversion automatically. The user's browser sends Accept: image/webp, the CDN detects this and either converts on the fly or serves a pre-generated WebP version. The origin can keep serving the original JPEG/PNG. This is called content negotiation or image optimization at the edge.
WebP supports lossy compression (like JPEG), lossless compression (like PNG), and transparency (alpha channel). The main competitor is AVIF, which achieves even better compression but is slower to encode and has less browser support. Most CDN image optimization pipelines serve AVIF where supported, WebP as fallback, and original format as last resort.
Examples
# HTML: serve WebP with fallback
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="example">
</picture>
# Nginx: serve WebP based on Accept header
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
location ~* \.(jpg|png)$ {
try_files $uri$webp_suffix $uri =404;
add_header Vary Accept;
}
# Convert with cwebp CLI
$ cwebp -q 80 input.jpg -o output.webp
# input.jpg: 245KB -> output.webp: 162KB (34% smaller)Video Explanation
Frequently Asked Questions
An image format by Google that provides 25-35% smaller files than JPEG at similar quality, with support for transparency (like PNG) and animation (like GIF). Supported by all modern browsers.
# HTML: serve WebP with fallback
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="example">
</picture>
# Nginx: serve WebP based on Accept header
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
location ~* \.(jpg|png)$ {
try_files $uri$webp_suffix $uri =404;
add_header Vary Accept;
}
# Convert with cwebp CLI
$ cwebp -q 80 input.jpg -o output.webp
# input.jpg: 245KB -> output.webp: 162KB (34% smaller)Related CDN concepts include:
- Vary Header — A response header that tells caches which request headers should be included in the cache …
- Compression — Reducing the size of HTTP response bodies before transmission. Common algorithms: gzip, Brotli, and zstd. …
- Content Negotiation — Server-side selection of the best response variant based on client Accept headers. The server picks …
- Image Optimization — Reducing image file size at the CDN edge through format conversion (WebP, AVIF), responsive resizing, …