How to support uploading webp format image files in wordpress

What is webp

WebP is a modern image format developed by Google that provides excellent lossless and lossy compression for images on the Web.

Using WebP, webmasters and web developers can create smaller (WebP image compression volume is only about 2/3 of JPEG), richer images, can save a lot of server broadband resources and data space, thus making the Web faster.

Why use webp

  1. Reduce the size of image loading resources and speed up web page loading
  2. Save user traffic resources
  3. Reduce server storage and traffic resources

Webp compatibility

Why we use webp in wordpress

Obviously, webp not only improve web page loading speed, but also indirectly improve the personal website SEO ranking and increase user viscosity.

WordPress does not support webp format image upload by default.

So how to make wordpress support webp format upload?

It’s easy.

Just add the following code to the functions.php file of the theme you are using.

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

If you want to view the preview image in the “Media / Library”, you also need to add the following code in the functions.php file.

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

OK.

So far your wordpress has supported webp format image upload.

Best Article

Linux common commands tutorial and use examples
Sed command tutorials in linux/unix with examples and use cases
Awk command tutorials in linux/unix with examples and use cases

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *