LinkedIn Does Not Support WebP

LinkedIn has not yet implemented support for WebP in preview images of articles.

2550 views
d

By. Jacob

Edited: 2021-03-13 18:52

As you may have noticed, LinkedIn does not support the webp image format. If you use webp in your articles and attempt to share them on LinkedIn, the image-preview will simply not work; instead you might see unrelated images being used as preview—or no image will be shown at all!

This situation is far from ideal.

The webp format was introduced almost 10 years ago, and is well supported by all decent browsers. The format offers superior compression than the traditional png and jpeg formats, which, when used, will improve the loading speed of a website.

There is currently no solution to this problem if you are using webp for snippet images. I have already tried a couple of solutions:

  1. Redirect (307) .webp to .jpg for clients that do not support webp.
  2. Deliver an alternative jpeg image in-place, resulting in a mismatch between file extension and mime type.

It looks like LinkedInBot will not even request a .webp image, so none of these solutions will work, although they are perfectly valid for other clients.

Delivering an Alternative image format

If a client supports the WebP format, it should be included in the accept HTTP request header as image/webp. If not included, you can simply convert the image to jpg or png and deliver that back to the client instead.

This will not work for LinkedInBot/1.0, but it will work for many other clients.

Doing so will however mean that files ending in .webp is going to be delivered with a mismatching Mime Type; this is very problematic since it tends to confuse users into thinking that the files are webp when in fact they are either jpg or png.

if (false !== strpos($_SERVER['HTTP_ACCEPT'], 'image/webp')) {
  $img = imagecreatefromwebp('/path/to/file/some-file-name.webp');

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

This will output the converted file directly to the browser, in-place, which will result in a mismatch between the content-type and the file extension.

It would be better to save the converted image, and then redirect to the new image. E.g.:

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

Then redirect the client:

header('Location: https://example.com/images/converted-file-name.jpg', false, 307);

Note. You can use Beamtic's file handler class to do this, as it will automatically convert, and redirect .webp images to .jpg.

Tell us what you think:

Frederik Van Lierde

It seems Safari (oniPhone) does accept webp images now (at least I got them on my iPhone)
But you are right about LinkedIn :(

  1. In this Tutorial, it is shown how to redirect all HTTP requests to a index.php file using htaccess or Apache configuration files.
  2. How to create a router in PHP to handle different request types, paths, and request parameters.
  3. Tutorial on how to use proxy servers with cURL and PHP
  4. 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.
  5. How to effectively use variables within strings to insert bits of data where needed.

More in: PHP Tutorials