LinkedIn Does Not Support WebP
LinkedIn has not yet implemented support for WebP in preview images of articles.
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:
- Redirect (307) .webp to .jpg for clients that do not support webp.
- 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:
It seems Safari (oniPhone) does accept webp images now (at least I got them on my iPhone)
But you are right about LinkedIn :(