Serving WebP images with the correct Content-Type

A typical HTTP response for a WebP image may look like this:

HTTP/1.1 200 OK
Content-Type: image/webp
Content-Length: 22454

To deliver an image/webp Content-Type from PHP, you can use the header() function:

header('Content-Type: image/webp');
readfile('/var/www/mysite/images/my-image.webp');
exit();

This tells the client that the response contains a WebP image. When serving static images directly, Apache and Nginx should normally handle the MIME type automatically, provided the server is configured correctly.

Delivering alternative image formats

Although WebP is widely supported, there may still be situations where alternative formats are necessary. Older browsers, image-processing applications, and some social media crawlers may have limited support for particular formats.

This is particularly important when images are used for social media previews. When a link is shared, a crawler may retrieve the image specified by the page's metadata, such as the og:image property.

Historically, some services, including LinkedIn, have had problems processing WebP images. Because support can change, it is sensible to test the relevant services rather than assume they behave like ordinary browsers.

There are several ways to provide alternative formats:

• Use the HTML picture element to let browsers choose a supported format.
• Use HTTP content negotiation to serve different formats based on the client's capabilities.
• Provide separate image URLs and use JPEG or PNG where maximum compatibility is required.

<picture>
  <source srcset="/images/example.avif" type="image/avif">
  <source srcset="/images/example.webp" type="image/webp">
  <img src="/images/example.jpg" alt="Example image" width="800" height="600" loading="lazy">
</picture>

Accept: image/avif,image/webp,image/png,image/*,*/*;q=0.8

$accept = $_SERVER['HTTP_ACCEPT'] ?? '';

if (str_contains($accept, 'image/webp')) {
    echo 'WebP is explicitly accepted by the client.';
}

if (strpos($accept, 'image/webp') !== false) {
    echo 'WebP is explicitly accepted by the client.';
}

Converting WebP to JPEG with PHP

If you need to provide a JPEG alternative to a WebP image, you can convert it using PHP's GD Library.

GD is available as a PHP extension and must be installed and enabled with WebP support. You can check the available image formats using the imagetypes() function:

if (imagetypes() & IMG_WEBP) {
    echo 'WebP is supported by GD.';
}

You can then use imagecreatefromwebp() to load an image and imagejpeg() to convert it to JPEG.

$source = '/var/www/mysite/images/example.webp';
$destination = '/var/www/mysite/images/example.jpg';

$image = imagecreatefromwebp($source);

if ($image === false) {
    throw new RuntimeException('Unable to load WebP image');
}

if (!imagejpeg($image, $destination, 80)) {
    throw new RuntimeException('Unable to save JPEG image');
}

imagedestroy($image);

$image = imagecreatefromwebp('/var/www/mysite/images/example.webp');

if ($image === false) {
    throw new RuntimeException('Unable to load WebP image');
}

header('Content-Type: image/jpeg');

imagejpeg($image, null, 80);
imagedestroy($image);
exit();

Redirecting clients to alternative image formats

Another approach is to save the converted image and redirect clients that do not explicitly support WebP to its JPEG version.

For example, once a JPEG alternative exists, a PHP application could perform a temporary redirect:

header('Location: /images/example.jpg', true, 307);
exit();

This sends an HTTP 307 Temporary Redirect, instructing the client to retrieve the JPEG version from its own URL.

While this approach keeps file extensions consistent, it also introduces an additional HTTP request. Furthermore, not all crawlers and external services handle redirects in the same way.

For ordinary website images, the picture element is generally preferable. Redirects are more appropriate when you need to preserve existing image URLs or when your application already handles image delivery dynamically.

Vary: Accept

WebP and social media preview images

Social media crawlers do not necessarily behave like regular browsers. Even when a service supports WebP uploads or displays WebP images on its website, its link-preview crawler may have different requirements.

For example, a crawler may reject certain image formats, fail to follow redirects, or require a directly accessible image URL.

In my earlier tests, LinkedIn had problems retrieving WebP preview images, including situations where the image URL redirected to JPEG.

These were observations of the service's behavior at the time and should not be treated as a permanent limitation. Support and crawler behavior can change.

For maximum compatibility, it is generally sensible to provide a separate JPEG or PNG image for social media previews:

<meta property="og:image" content="https://example.com/images/preview.jpg">

This avoids relying on WebP detection or redirects when external services retrieve your preview images.

Deleting unnecessary image files

If you have generated alternative JPEG files that are no longer required, you can locate them using the Linux find command.

For example, to list all JPEG files in a directory and its subdirectories:

find /path/to/directory -type f \( -iname '*.jpg' -o -iname '*.jpeg' \) -print

After reviewing the results and confirming that the files are no longer needed, you can delete them:

find /path/to/directory -type f \( -iname '*.jpg' -o -iname '*.jpeg' \) -delete

The parentheses ensure that both file extensions are matched correctly. Without proper grouping, the logical operators in a find expression may not behave as expected.

Which image delivery method is best?

For most modern websites, using the HTML picture element is the simplest and most reliable method for delivering alternative image formats.

It allows browsers to select a supported format without requiring server-side image conversion during each request or introducing additional HTTP redirects.

Dynamic content negotiation can still be useful when building an image delivery service or file handler, particularly when you want to manage image formats automatically without modifying the HTML of individual pages.

For social media previews, providing a dedicated JPEG image is a practical way to avoid compatibility problems with external crawlers.

Ultimately, WebP is sufficiently well supported that most websites can use it directly. Whether you need additional fallbacks depends on the browsers, applications, and external services you intend to support.

Links

1. Downloading and Installing WebP - Google
2. Image file type and format guide - MDN
3. The HTML picture element - MDN
4. PHP imagecreatefromwebp() - PHP Manual

Tell us what you think: