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

Upload WEBP images in WordPress: If you find a way to reduce the size of your images, you will speed up your website and change the experience for your visitors. WebP is a modern image format that offers a file size reduction of up to 25% compared to JPEG and PNG files. Most modern browsers support WebP, and 77% of Internet users have a browser that supports WebP, but some browsers, such as Safari, do not support WebP, so you cannot deliver WebP images to visitors.

To solve this problem, use a WordPress plugin to convert images to WebP, make the WebP version available to visitors in browsers that support it and use the original image in browsers that do not support it. Due to the power of WebP images, they cannot be added to the WordPress media library. Additional security steps are required when using WebP to prevent WordPress from allowing users to upload them by default.

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

Readme: Hostinger Reviews In India & USA Cheapest Price

Additional security steps are also required when using WebP, which prevents WordPress users from uploading WebP images by default (this is not the same security risk as SVG files, but WebP files need a workaround to process them before they can be added to the WordPress media library). Once you’ve uploaded the images to your server and configured your site to display them, it’s a big effort to do everything else.

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

Go To Appearnace>Theme editor> Functions.php> Paste the code at the bottom and save the file.

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

Readme: How to Create Sticky Footer Ads for Blogger & WordPress

Saurabh Vishwakarama is Founder & CEO of Techncigyan.com & Publisher with an Entrepreneur. He is Also a Student & Full Time Passionate Blogger.

Leave a Comment