How To Upload WebP Files on WordPress

In this tutorial we are sharing a guide on uploading webP images on WordPress.

WebP is a modern compressed image format that provides superior lossless and lossy compression for images on the web created by Google. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster. WebP lossless images are 26% smaller in size compared to PNGs.

WordPress on the otherhand is one of the most powerful, popular, and customizable platforms in the world.

Till date (13/September/2020) when am writing this post, WordPress shows no chance of including webP support to it’s core by default.

So, let’s have a look on including support for webP images for WordPress

wordpress webp error

WordPress error message when you try to upload Webp file: Sorry, this file type is not permitted for security reasons. If you’ve tried to upload a Webp file to your media library and received the “Sorry, this file type is not permitted for security reasons” error, you may feel stumped as to how to proceed. Below I will explain how to solve the problem.

Add some lines on your theme functions.php

What about uploading webP images directly from WordPress dashboard like normal images do?

You can achieve it by adding a few lines of code into your functions.php file.

WordPress does not natively support viewing and uploading WebP files, but I will explain to you how you can make it work in a few simple steps.

Log in to your WordPress admin area and go to AppearanceTheme Editor and find functions.php after which copy and paste the code below at the end of the file and save it.

//** *Enable upload for webp image files.*/
function webp_upload_mimes($existing_mimes) {
    $existing_mimes['webp'] = 'image/webp';
    return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');

Image Preview ?

The above code add support for uploading webP images directly through WordPress dashboard but,

If you want to see image (thumbnail) preview when you go Media / Library you have to add the code below in the same functions.php file. Copy and paste below code below at the end of the file and save it.

//** * Enable preview / thumbnail for webp image files.*/
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;
}
add_filter('file_is_displayable_image', 'webp_is_displayable', 10, 2);

Safari Desktop and Safari iOS Browser now added support to WebP files. 🙂

At the time of writing this post, according to caniuse.com 80.73% of the global population is using a browser which supports WebP images. More clearly, all major web browsers except IE 11 now supports webP non-animated and animated images without any hassle. Now, even with this majority fully committing to WebP, that would leave 19.27% of users missing out on WebP format images altogether.

webp browser support

Follow TechBiriyani on FacebookTwitter to get all the latest updates.

Leave a Comment