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 image files 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
This image has an empty alt attribute; its file name is 1.jpg
Open ” Theme Editor” In Appearance
  • Theme Functions [ functions.php]
This image has an empty alt attribute; its file name is 2-1024x462.jpg
Select the ” Theme Function (functions.php) ”
  • Copy and Paste this below-given Code and click on update file
This image has an empty alt attribute; its file name is 3.jpg

You are done, now you will be upload WebP files to your WordPress website

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