Uploading and use WebP image files on WordPress

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. 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. WebP lossy images are 25-90% smaller than comparable JPEG images at equivalent SSIM quality index. WebP is natively supported in Google Chrome, Firefox, Edge, Opera browser, and by many other tools and software libraries.

WebP images are designed for the web and are almost indistinguishable from JPEG and PNG, so probably you have already encountered them without noticing that. You can save a WebP image to your computer the same way you would any other image on the internet, so by right-clicking the image and click Save Image As. Graphics software like GIMP, ImageMagick, or Microsoft Paint, can natively open WebP files by default, so you can edit them also.

Optimization is very important on any web site or portal and images are a big problem if you are using them extensively, so the page load will be usually bad on those websites with tons of images to be retrieved by the client web browser and also on server side this will be a problem if there are bandwidth limitations. Typically this kind of "overload", related to images, it is more than CSS, JS, and HTML code combined. So choosing a robust image optimization method and image format such as WebP is crucial so that so that you can decrease your page weight as much as possible.

Generally, the smaller the web page is the faster it will load, and both users and search engines (SEO) will be happy about that.

Now, if you have tried to upload a Webp file to a WordPress Media Library you will receive the Sorry, this file type is not permitted for security reasons message error. Below it will shown how to address this situation and enable the upload and the thumbnails of Webp files on WordPress.

The Solution

To address this situation we can add two simple PHP functions on our theme, in the functions.php file, or even by creating a simple WordPress custom plugin in which there will reside those functions. 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: to find the functions.php file we have just to go to Appearance / Theme Editor and choose functions.php; after that (or by using our custom PHP plugin) we can copy and paste the code below at the end of the file and finally save it.

The below function will use the mime_types WordPress filter to add the custom webp_upload_mimes funtion which actually specify the new MIME type to be allowed in WordPress for upload.

The following function will add the image/webp MIME type to WordPress to let it recognize this kind of files:

//** *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');

To enable see image (thumbnail) preview when we go to Media Library during upload, or even while getting a pre-uploaded Webp file, we will have to add the following PHP function again in functions.php file or in our custom WordPress plugin.

The below function will adopt the file_is_displayable_image filter to use the webp_is_displayable custom function to allow in WordPress to show image preview of the new Webp image file type.

To find the functions.php file we have just to go to Appearance / Theme Editor and choose functions.php; after that (or by using our custom PHP plugin) we can copy and paste the code below at the end of the file and finally save it:

//** * Enable preview 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);

Avoid the functions.php approach

If we want to avoid to use and modify the functions.php file of our WordPress theme (which is highly recommended in any case), we can include the functions required to add Webp file format by creating a new custom plugin and including the following PHP code structure to basically create a custom functions repository in our WordPress site:

<?php
/**
* Plugin Name: Custom Plugin
* Plugin URI: https://www.custplug.com/
* Description: Custom Functions
* Version: 1.0
* Author: The Unknown
* Author URI: https://www.custplug.com/
* Functions Included: webp_upload_mimes, webp_is_displayable
**/

//** *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');

//** * Enable preview 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);
?>