How to Upload WEBP images in WordPress (Without Any Plugins)

To Upload WEBP images in WordPress,

WebP is a new image format that can help your WordPress website run faster by making image files smaller and faster to load.
We all know that quicker websites are better for SEO and user experience and that they help us keep visitors and search engines happy.

This article will teach you all you need to know about WebP and how to utilize it effectively on your WordPress site.

Easy Steps To Upload Webp images in WordPress without plugin

By default WordPress does not allow you to upload webp image files, if you want to upload webp image files to WordPress then follow these 6 easy steps below to upload webp images to WordPress.

• Log in to your WordPress admin area
• Appearance
• Theme Editor

Open ” Theme Editor” In Appearance

• Theme Functions [ functions.php]

Select the ” Theme Function (functions.php) ”

• Copy and Paste this below-given Code and click on update file

You are done, now you will be able to Upload WEBP images in WordPress

Add this below-given code to your theme functions (functions.php)

function webp_upload_mimes( $existing_mimes ) {
    // add webp to the list of mime types
    $existing_mimes['webp'] = 'image/webp';
 
    // return the array back to the function with our added mime type
    return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

After adding this code you will be upload WebP images in your WordPress but you can’t preview these images on your media library. If you want to see an image preview of these files on your media library you have to add some extra code to your Theme Functions (functions.php) of your WordPress Theme, The code is given below.

Add the below-given code to your theme functions (functions.php) to preview webp images on your media library

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