image/webp MIME Type — WebP vs JPEG Performance & Serving Guide
Google's modern image format. Provides superior lossless and lossy compression compared to JPEG and PNG — WebP images are typically 25–35% smaller than equivalent JPEG files. Supports transparency (like PNG) and animation (like GIF). Supported by all modern browsers.
Used For
- All web images (modern default)
- Replacing JPEG and PNG for bandwidth savings
- Animated images (replacing GIF)
HTTP Header Example
HTTP/1.1 200 OK
Content-Type: image/webp
Cache-Control: public, max-age=31536000Code Examples
// Convert JPEG to WebP using sharp
import sharp from 'sharp'
app.get('/image.webp', async (req, res) => {
const webp = await sharp('./public/image.jpg').webp({ quality: 80 }).toBuffer()
res.set('Content-Type', 'image/webp').send(webp)
})
// Serve WebP with JPEG fallback via <picture>
// <picture>
// <source type="image/webp" srcset="/image.webp" />
// <img src="/image.jpg" alt="..." />
// </picture>
// Next.js Image component converts to WebP automatically
import Image from 'next/image'
<Image src="/photo.jpg" alt="..." width={800} height={600} />Related MIME Types
Frequently Asked Questions
What is the image/webp MIME type?
Google's modern image format. Provides superior lossless and lossy compression compared to JPEG and PNG — WebP images are typically 25–35% smaller than equivalent JPEG files. Supports transparency (like PNG) and animation (like GIF). Supported by all modern browsers.
When should I set Content-Type: image/webp?
Set Content-Type: image/webp on HTTP responses that contain WebP Image data. All web images (modern default).
What file extensions use image/webp?
Files with image/webp content typically use these extensions: .webp.
What happens if I serve this with the wrong Content-Type?
Browsers use the Content-Type header to decide how to handle the response. Serving image/webp content with an incorrect MIME type can cause browsers to display it incorrectly, refuse to execute it (scripts), or prompt an unintended download. Modern browsers respect X-Content-Type-Options: nosniff and will not attempt to auto-detect the type.