The code below is a WordPress filter function that enables the preview or thumbnail generation for webp image files. It goes into your theme's 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);


Let's break down the code:

  1. The function webp_is_displayable is defined with two parameters: $result and $path. It is a filter callback function that will be called when checking if a file is displayable as an image.

  2. Inside the function, it first checks if the initial result value is false. This means that the file is not already determined to be displayable.

  3. The variable $displayable_image_types is an array that holds the constant IMAGETYPE_WEBP, which represents the image type for webp files.

  4. The @getimagesize($path) function is used to get the image size information for the given file path. It returns an array with information about the image, including the image type.

  5. If the image size information is empty (meaning the file is not a valid image), the result is set to false.

  6. If the image type from the image size information is not in the $displayable_image_types array, indicating that it is not a webp file, the result is also set to false.

  7. If none of the above conditions are met, the result is set to true, indicating that the file is displayable as a webp image.

  8. Finally, the function returns the result.

  9. The add_filter function is used to add the webp_is_displayable function as a filter to the file_is_displayable_image hook with a priority of 10 and accepting two arguments.

In summary, this code checks if a file is a webp image and sets the result accordingly, allowing WordPress to generate thumbnails or previews for webp images.