Beamtic's logo

Share via:

The WebP Mime Type

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

699 views

Edited: 2020-07-05 11:43

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 well supported by browsers, with the exception of Apple's Safari browser, which still has not added support for webp; this presents a number of challenges for web developers, some of which will be discussed in this article.

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;
exit();

Delivering alternative formats for clients

As discussed earlier, webp is not supported by all web browsers. Apple's Safari still does not support webp, and this is despite the fact that the format has been around for almost 10 years. 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, a image snippet is usually shown along with the link; but the image is only shown if the site supports the format. Just something to keep in mind.

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:

<picture>
  <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.">
</picture>

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!';
  exit();
}

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);
imagedestroy($img);
exit();

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: https://example.com/images/some-file-name.jpg', 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

Links

  1. Downloading and Installing WebP - developers.google.com

Comments

  1. How to create a custom error handler for PHP that handles non-fetal errors.
  2. We can access other classes properties (variables) and methods (functions) by injecting the class object in the class that needs it.
  3. 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.
  4. Should you use file_get_contnts or cURL when performing HTTP requests from PHP? It does not matter; but regardless of which you use, you should still handle errors properly!
  5. When using file_get_contents to perform HTTP requests, the server response headers is stored in a reserved variable after each successful request; we can iterate over this when we need to access individual response headers.

More in: PHP Tutorials