Share via:

The WebP Mime Type

Information about the WebP content type, and how we might handle webp images in PHP.


Edited: 2020-12-15 14:08

Mime Type of webp images.

The content-type (aka. Mime Type) used for WebP images is image/webp, and the standard file extension is .webp.

WebP is a modern image format that offers superior compression to png and jpg, which helps to more quickly load web pages.

The webp format is supported by most modern browsers, and recently Apple's Safari browser also started supporting webp, this happened with the release of iOS 14 on September 16, 2020.

A typical header response for a webp file may look like this:

HTTP/1.1 200 OK
content-type: image/webp
content-length: 22454

To deliver a image/webp content-type from PHP:

header('content-type: image/webp');
echo $image_data;

Delivering alternative formats for clients

Older browsers do not support webp, and Apple only started supporting it in iOS 14. Additionally, some social media websites might also not support webp.

Facebook and Twitter both do support webp, but LinkedIn does not yet support it. When a link is shared on these sites an image snippet is usually shown along with the link — but the image is only displayed if the site supports the format. This is just something to keep in mind if you plan on switching.

We can solve these problems by delivering an alternative format to clients that do not understand the webp format; this can be done either by converting the images, or using the HTML picture element.

Using the picture element

The picture element allows us to include multiple images, and have the client automatically pick whichever is supported.

In practice, this will look like:

  <source srcset="/path/to/file/some-file-name.webp" type="image/webp">
  <source srcset="/path/to/file/some-file-name.jpg" type="image/jpeg"> 
  <img src="/path/to/file/some-file-name.jpg" alt="If your browser does not support the picture element.">

The image contained in the img element will be displayed if the picture element is not supported.

Converting webp to jpg

If a client supports the webp format, the accept header will contain image/webp; to check for the string we may use strpos:

if (false == strpos($_SERVER['HTTP_ACCEPT'], 'image/webp')) {
  echo '<b>image/webp</b> is not supported by your client!';

Of course, this is not going to be enough to deliver an alternative format; to do that we will also need to convert the image.

Note. Converting images can be done with the GD library, which you may need to install manually since it does not come with PHP.

To also convert the image, we can use the below code:

$img = imagecreatefromwebp('/path/to/file/some-file-name.webp');

// Convert the file to jpg with 80% quality
imagejpeg($img, null, 80);

The above would output the file directly to the client. If we instead want to save it, we should change the second parameter of the imagejpeg function:

imagejpeg($img, '/path/to/file/some-file-name.jpg', 80);

Then, if the client does not support webp, we may redirect the client to the new file:

if (false == strpos($_SERVER['HTTP_ACCEPT'], 'image/webp')) {
  header('Location:', false, 307);

Why use a 307 redirect?

The 307 redirect is temporary, which I think makes it a good candidate for solving this problem.

Presumably those web services and browsers that still does not support webp, will, at some point, be updated, and our redirect will no longer be needed.

Remember to delete the .jpg version of the files once they are no longer needed, to do this we may use a command from terminal. Before running the below command, try running it without -delete to get a list of found files:

find [/path/to/directory] -type f -iname '*.jpg' -or -iname '*.jpeg' -delete


  1. Downloading and Installing WebP -


  1. PHP does not have named parameters build-in, but in this tutorial you can learn how to simulate the functionality with a bit of extra code.
  2. Validating user-input is one of the most important ways to increase security and prevent hacks; in this article, I will show how to easily validate GET and POST parameters, and prevent your app from being abused to send spam.
  3. How to properly validate input from PHP using preg_match, and avoid undefined notices.
  4. How to use cURL to send HTTP GET and POST requests from PHP applications.
  5. Setting custom HTTP Headers with cURL is useful when changing User Agent or Cookies. Headers can be changed two ways, both using the curl_setopt function.

More in: PHP Tutorials