Why does WordPress hate WebP?

How to Use WebP Images on WordPress

WebP has been here 10 years now. But I still have to jump through hoops to use it with WordPress.

Now I could just about accept that when I relied on my fast, famous, fabulous LiteSpeed cache plugin to replace big JPGs with speedy, tiny WebPs. But now the best image editor can save WebP format. So why can’t I upload them?

Easy WebP Images

My image editing needs are simple. So I need an image editor that works for me. Without my having to lose 3 years of my life studying advanced editing techniques. So Pixlr is the best for me. Because all I need is layers. Then I can create a collage. Or add text to images.

Now the old Flash version is being replaced. And the new version at Pixlr.com/e/ is getting new features. Including the ability to save in WebP format.

WordPress Rejects WebP Images

So I’ve created my WebP image and ready to Add Media to my WordPress page. But when I try to Select Files in the Upload Files screen all I see is old PNGs and JPEGs. Yet I can see my new WebP images in my files list. Maybe drag and drop will work?

No! I just get an error – “Sorry, this file type is not permitted for security reasons.” Then I try to resolve that by searching for the error. But I get poor advice to edit wp-config.php which is a very bad idea. Because setting the value of ALLOW_UNFILTERED_UPLOADS to ‘true’ leaves your site open to malicious file uploads. Also, it doesn’t solve the problem.

Unfortunately, searching for error messages is hit-and-miss. Sometimes you get good results immediately. But mostly it’s better to search for the real issue. Which is How To Upload WebP Files on WordPress.

Towards the end of that article are two code boxes. So to save you one copy-paste I’ve combined them:

add_filter('mime_types', 'webp_upload_mimes');
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
function webp_is_displayable($result, $path) {
if ($result === false) {
$displayable_image_types = array( IMAGETYPE_WEBP );
$info = @getimagesize( $path );
if (empty($info)) {
$result = false;
} elseif (!in_array($info[2], $displayable_image_types)) {
$result = false;
} else {
$result = true;
}
}
return $result;
}

Also, don’t mess about with your theme’s functions.php – use Shea Bunge’s Functionality (Or his Code Snippets plugin).

How do You Use WebP Images on WordPress?

Your WebP Images

Do you need help with WebP images, WordPress, LiteSpeed, Pixlr or anything else? Just ask on the feedback form below. But before you do, please subscribe to my update list:

Enter your email address:

No Charge.
Subscription is free.
100% Safety Guaranteed.
Your email address is safe - I will never share it with anyone else.
No Commitment.
Each of my update emails ends with an Unsubscribe link. So, you can stop updates whenever you like. Then, rejoin whenever you like. You are in control.