Add WebP Image format in WordPress (Without plugins)
- Internet
- May 24, 2021
- by Hrishikesh
If you operate your website through WordPress and have a good tracffic on it. Then you know how important it is to optimize your website after getting monetization approval.
One of the main factors is to use the correct image file format. PageSpeed Insights itself suggest using JPEG 2000, JPEG XR, and WebP on the website.
However, WebP image format allows you to provide more optimized compressed images than any other image format.
As compared to PNG, WebP lossless images are smaller in size by 26%. And 25–34% smaller than JPEG. The web image file will provide you lossless and lossy compression images.
WebP image format will quickly load the images, resulting in a faster user-friendly site experience.
But you cannot add .webp files normally just like how like you upload PNG or JPEG images.
Here’s how to add WebP images in WordPress without using any plugin. We have also covered some common FAQs related to the topic, check it out!
Article Contents hide
1 How to Add .webp Image Files in WordPress Without using any Plugins?
3 Why should you use WebP image files?
4 Will My Website Get Slow by Adding .webp HTML Code in WordPress?
5 Are There any WordPress Plugins that allow Adding .webp images?
6 Do Every Browser Supports WebP image files?
How to Add .webp Image Files in WordPress Without using any Plugins?
To do so, users need to do the following:
- Go to your WordPress Dashboard
- Now, click on Appearance
- Under Appearance, click on Theme Editor
- On the left Theme Files sidebar, click on functions.php
- Now, a box consists of HTML codes will appear.
- Go to the very last line, and paste the following code:
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' );
//** * 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);7. And then click on Update File.
Also Read: How To Stop Getting Notifications From Google Chrome
Now, you can be able to add images .webp images on WordPress just like how you upload PNG, JPG, and JPEG image format.
FAQs
Why should you use WebP image files?
Will My Website Get Slow by Adding .webp HTML Code in WordPress?
I know that making changes in CSS and HTML affects your site speed. But the code mentioned above to add a .webp file without a plugin will not at all make your site slow.
In fact, you can check out on Google PageSpeed Insight, whether the code is affecting the speed or not. But it has worked for many users without affecting site speed.
Are There any WordPress Plugins that allow Adding .webp images?
Yes! Following are some WordPress plugins that will allow you to add .webp image files:
- Imagify
- ShortPixel
- Optimole
- Allow Webp Image
- Images to WebP
These are some paid and free plugins that will allow you to add .webp image format in WordPress.
Also Read: Does Microsoft Edge Browser Works on Windows 7?
Do Every Browser Supports WebP image files?
The majority of the browser supports WebP image format. Google Chrome, Mozilla Firefox Microsoft Edge, and Safari (in version 14 and above).
According to the caniuse, 79% of internet browser supports WebP image format.
Conclusion
You should start using WebP file format rather than using PNG, JPG, JPEG, etc. This will not only help you to provide better optimization, but also make your website load faster.
That’s it for now, hope this helps! We are glad to know your thoughts in the comment section below. Till then, stay tuned for more info.
Read Next: (WordPress Fix) Can NOT find LSCWP path for object cache initialization