Developer Toolbox
About

image/webp

image/webp is the type for WebP images, which are usually smaller than JPEG and PNG at the same quality. Every current browser displays them, and content negotiation lets a server send WebP only to clients that say they accept it.

Open in cURL Builder A request with this type is filled in.

Header

Content-Type: image/webp

At a glance

Extensions
.webp
Kind
Binary
Parameters
None
In a browser
Displays the image.

With curl

curl -X PUT https://api.example.com/images/photo.webp \
  -H 'Content-Type: image/webp' \
  --data-binary @photo.webp

With fetch

await fetch('https://api.example.com/images/photo.webp', {
  method: 'PUT',
  headers: { 'Content-Type': 'image/webp' },
  body: file
});

Common mistakes

  • Negotiate with Vary

    If one URL returns WebP to browsers that send Accept: image/webp and JPEG to the rest, add Vary: Accept, or a cache will serve one format to everyone.

  • Old servers send octet-stream

    A server with no mapping for .webp sends application/octet-stream, and the image downloads instead of showing when opened directly. Add the mapping.

  • Fallback with <picture>

    <picture><source srcset="photo.webp" type="image/webp"><img src="photo.jpg" alt=""></picture> lets the browser skip a format it does not know, with no server logic at all.