Uploading WebP images in Wordpress Media Library

Question

Running Wordpress 6.1.1 and PHP 7.0.33 hosted on Plesk Obsidian v18 and Linux 7.9

When I try to upload a webp image through WP's media library, I get this warning:

This image cannot be processed by the web server. Convert it to JPEG or PNG before uploading.

I went and checked WP's site health > Media Handling and see that webp is not supported.

Any one has a solution for this?

Answer 1

I found this that helped me, i change my XAMPP Apache config Uncomment this line:

extension=gd

Resource: https://alvand.dev/blog/enable-webp-xampp-wordpress/

Answer 2

Wordpress added support for WebP from version 5.8 onwards and is hence supported in your newer version 6.1.1 . The warning screenshot shows that your imagick library does not support WebP format in the list of formats suppoerted.

You can try updating PHP version or ask your hosting provider to make sure the libwebp for Webp support is enabled in the Imagick module.

OR

If you have SSH access you can refer to this answer on how to install/configure it on your own.

Answer 3

From wordpress version 5.8, webp is supported by default. Anyways add the below code snippet in your active theme's functions.php file.

function add_custom_upload_mimes( $mimes_types ) {
    $mimes_types['webp'] = 'image/webp'; // webp files
    return $mimes_types;
}
add_filter( 'upload_mimes', 'add_custom_upload_mimes' );

function add_allow_upload_extension_exception( $types, $file, $filename, $mimes ) {
    // Do basic extension validation and MIME mapping
      $wp_filetype = wp_check_filetype( $filename, $mimes );
      $ext         = $wp_filetype['ext'];
      $type        = $wp_filetype['type'];
    if( in_array( $ext, array( 'webp' ) ) ) { // if follows webp files have
      $types['ext'] = $ext;
      $types['type'] = $type;
    }
    return $types;
}
add_filter( 'wp_check_filetype_and_ext', 'add_allow_upload_extension_exception', 99, 4 );
  


function displayable_image_webp( $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', 'displayable_image_webp', 10, 2 );