image/webp WebP Flagship
A modern image format offering both lossy and lossless compression, typically smaller than JPEG/PNG at equivalent quality.
What it's for
image/webp identifies WebP images — a modern image format developed by Google that supports both lossy and lossless compression modes (and animation) in a single format, generally producing smaller file sizes than equivalent-quality JPEG or PNG images. It was created specifically to address the fragmented "JPEG for photos, PNG for graphics, GIF for animation" landscape by offering one format that handles all three reasonably well, with meaningfully better compression efficiency across the board.
Browser support reached effectively universal status across all major modern browsers years ago, which is why WebP has become a common default in image optimization pipelines and CDN-based automatic format conversion (many CDNs and frameworks will automatically serve WebP to supporting browsers while falling back to JPEG/PNG for older clients).
Format & syntax
Content-Type: image/webp
No parameters. WebP internally supports lossy compression (similar concept to JPEG, generally more efficient), lossless compression (similar concept to PNG, generally more efficient), transparency (alpha channel, like PNG), and animation (like GIF, but far more efficient) — all within the same container format and MIME type.
How it's used in practice
- Automatic format optimization pipelines — many modern image CDNs, frameworks (like Next.js's Image component), and build tools automatically convert and serve WebP to browsers that support it, falling back to JPEG/PNG for older clients, entirely transparently to the developer.
<picture>element with format fallbacks — using<picture>with multiple<source>elements (WebP first, JPEG/PNG fallback) lets you serve the more efficient format to supporting browsers while maintaining compatibility, without relying on server-side user-agent sniffing.- Reducing page weight for photographic content — swapping JPEG for WebP in image-heavy pages (photo galleries, e-commerce product images) is one of the most common, high-impact "quick win" web performance optimizations, often reducing image payload significantly with minimal visible quality difference.
- Animated content replacing GIF — animated WebP offers substantially better compression than animated GIF for similar-looking looping content, making it an increasingly common GIF replacement in contexts where the platform/consumer supports it.
Common mistakes & gotchas
- Not providing a fallback for older or non-browser consumers — while browser support is effectively universal today, WebP isn't automatically supported everywhere images might be consumed (some older tools, certain email clients, specific third-party integrations, or non-browser image processing pipelines) — providing a JPEG/PNG fallback via
<picture>or content negotiation remains good practice for genuinely broad compatibility. - Assuming lossless WebP is always smaller than PNG — while WebP's lossless mode is often more efficient than PNG, this isn't universally true for every single image; it's usually true but worth actually testing for images where file size is critical rather than assuming it blindly.
- Serving WebP without setting the correct Content-Type from custom servers/storage — similar to other formats, self-hosted or cloud-storage-served WebP files need the correct Content-Type explicitly set at upload/serve time, or some tools/browsers may not handle them correctly.
- Converting already-lossy JPEG source images to lossy WebP repeatedly — like any lossy-to-lossy conversion chain, converting a JPEG to WebP and back, or repeatedly re-processing, compounds quality loss — working from an original lossless/high-quality source when generating WebP variants avoids unnecessary degradation.
Comparison & FAQ
| Type | Purpose | Key difference from image/webp |
|---|---|---|
| image/jpeg | Lossy photo compression, older standard | WebP typically achieves smaller files at similar visual quality, with more universal legacy tool support for JPEG specifically |
| image/png | Lossless, transparency support | WebP's lossless mode is usually more space-efficient while offering comparable capabilities |
| image/avif | Even newer format, often better compression than WebP | AVIF can outperform WebP in compression efficiency but has somewhat less universal support and tooling maturity |
Is WebP supported by all modern browsers?
Yes, effectively universal support across all major current browsers. Fallback handling still matters for non-browser consumers (some tools, certain email/document contexts) or very old browser versions if you need to support them.
Should I convert all my existing JPEG/PNG images to WebP?
Generally a good performance win for photographic and general web imagery, especially at scale — most modern image optimization pipelines and CDNs handle this conversion automatically, making it a low-effort, high-impact change.
Is WebP always smaller than JPEG or PNG?
Usually, but not universally guaranteed for every single image — it's a strong general rule rather than an absolute one, so testing on your actual content is worthwhile if file size is a critical concern.
How does WebP compare to the newer AVIF format?
AVIF often achieves even better compression than WebP in many cases, but WebP currently has more mature, universal tooling and encoder support — both are meaningful improvements over JPEG/PNG, with the choice between them often coming down to your specific toolchain's support level.