LAST UPDATED: October 2023
Find out how to convert and upload webp images in WordPress site.
You can upload webP images in WordPress without any plugin.
If you use .jpg and .png images in your WordPress posts, the page loading time is slower compared to JPEG 200 or WebP format.
When you check the blog post with Google PageSpeed Insights, you see a similar remark like this:
Serve images in next-gen formats 0.75 s
Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption
Convert & Upload Webp Images In WordPress
There are two steps in this tutorial.
First is to convert your jpg or png image file to webp format.
Then you have to add code to your WordPress functions.php file, so that it can accept webp images.
STEP #1: Convert PNG Or JPEG To WebP
To improve or reduce your loading page speed, you convert the image format from PNG or JPEG to WebP.
This is how you convert or change your .jpg and .png images to .webp files.
1. Go to this image online converter.
2. Click "Choose File".
3. Select the image file from your computer.
4. After it has finished uploading, click “Start conversion” button.
5. Once it has fully converted it to webp format, a box will pop up.
6. Then save the webp image onto your computer or laptop.
Now it's time to upload your webp image to your WordPress blog post.
When you try to upload image with webp format in your WordPress site, you see this error message:
“Sorry, this file type is not permitted for security reasons”.
In other words, you cannot upload images in webp format to your WordPress site.
STEP #2: Upload WebP Image To WordPress
To overcome this technical problem, you need to add some code to your WordPress php file.
This is what you need to do:
1. Log in to your WordPress Dashboard.
2. Go to "Appearance", then click on "Theme Editor".
3. Look for "Theme Functions (functions.php).
4. Click on it.
5. The functions.php file with code will pop up.
6. There are two sets of code which you need to add or paste them at the end of the functions.php file.
7. The first set is the main code. It enables to upload webp image to wordPress.
8. It looks like this:
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;
}
add_filter('mime_types', 'webp_upload_mimes');
10. It looks like this:
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);
11. If you do not add this second set of code, you would NOT see any thumbnail image preview.
12. So, you need to add or paste the two sets of code onto your functions.php file.
13. Now add this two sets of code together at the end of the functions.php.
function webp_upload_mimes($existing_mimes) {
$existing_mimes['webp'] = 'image/webp';
return $existing_mimes;}
add_filter('mime_types', 'webp_upload_mimes');
//** * 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);
14. Then click the "Update File" button.
15. That's all you need to do.
Now you can upload any webp image to your Wordpress site without any problem.
You can also view the preview image (thumbnail).
RELATED TIP:
How To Fix WordPress Functions.php Error: Cannot Log In And Site Disappear