How to Upload WebP Images in WordPress

If you want to speed up your WordPress site, besides using CDN or reducing the number of HTTP requests, think of using WebP images. They help deliver high-quality images with much lower file sizes compared to others. This modern image file format has been becoming a new WordPress trend since the last decade.

But what are WebP images? How is this image type different from other file types? How can you upload them to your WordPress sites?

Today, our post will clarify all these questions to give you a clear picture of WebP images. The method to convert other image types to WebP will also wrap this article.

What are WebP Images?

Developed by Google in 2010, WebP is also considered the next-generation image file format for websites. It helps optimize your WordPress site betters by compressing images to a much smaller size than other image formats. Since then, you can significantly speed up your site without using low-quality images. Smaller image sizes also result in fewer bandwidth requests to your server, saving your money.

Compared to PNG, WebP images are 26% smaller in size, while this percentage increases up to 25-34% when it comes to JPEG files. These statistics are taken from Google WebP’s study on 11,000 images.

How WebP Images Work

WebP contains both lossless and lossy compression. For lossy compression, it uses predictive coding to reduce the file size. The predictive coding will use Neighboring pixels to predict the values of your files. This method is the same as VP8 key frame encoding.

Lossless compression is much more complex. It uses ‘the already seen image fragments to create new pixels.’ You’re allowed to reduce the file size of an image while still keeping its quality.

Which Browser Supports WebP Files

Google recommends you use WebP images for your sites to improve the page loading time. Understand this, WordPress has released version 5.8, supporting this new modern file format. Older WordPress versions prevent you from uploading WebP images to your sites.

Most browsers enable you to view WebP, including Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, and many others. iOS and macOS Safari users, fortunately, supports WebP images only partly. You cannot open them unless you use the macOS 11 Big Sur or later.

How To Upload WebP Image in WordPress

As mentioned, if you’re using WordPress 5.8+, just add them to your WordPress media library as you do for other file images such as JPEG, PNG, and GIF formats. Simply go to Media → Add New, then drag and drop your files there.

 

You can now insert them anywhere in your content.

You’re using a WordPress version older than 5.8 and don’t want to update it yet? You’ll face an error saying, “Sorry, this file type is not permitted for security reasons,” when attempting to add a Webp image to your site.

 

In this case, we suggest either making small code changes in your theme functions.php file or using a third-party plugin.

Method 1: Use Allow Webp image Plugin

Trusted by over 10 thousand users from pole to pole, Allow Webp image has become one of the most popular solutions for uploading Webp images to WordPress. Just install this light yet powerful plugin and let it handle all the job.

1. Head to Plugins → Add New in your WordPress admin dashboard
   
2. Type ‘allow webp image’ in the keyword box
3. Hit ‘Install Now’ and ‘Activate’ buttons to install the plugin on your site

That’s it! To make sure the plugin works properly, try uploading a new WebP image to your site to test it.

Method 2: Edit Theme File Using Code

In case you have technical skills and don’t want to install a plugin just to add a tiny function, simply add some code to the theme functions.php file.

All you need to do is:

1. Go to Appearance in your admin menu and open Theme Editor under it
   
2. Find the functions.php file in the theme file menu
3. Enter the following code to the end of 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);

Save your changes and you can upload WebP images in WordPress now.

It’s quite dangerous to edit the theme file directly since it may affect your site performance. We recommend using the Code Snippets plugin and adding the code there.

Convert JPG and PNG Images to WebP Files

It’s possible for you to change the image formats of new file uploads before adding them to WordPress using tools like Online Converter, WebP Converter, Convertio, etc. However, you’d better use the EWWW Optimizer plugin to convert both existing WordPress images and upcoming file uploads.

More than 900 thousand users worldwide put their trust in EWWW Optimizer to optimize their images. Besides core features like image compression and lazy loading, it also supports converting WebP images.

To get started with EWWW Optimizer, follow the guide below.

1. Install and activate the plugin. It’s similar to what you do with the Allow Webp image plugin above
2. Go to Settings → EWWW Image Optimizer in your admin area
   
3. Scroll down and enable the ‘WebP Conversion’ option
   
4. Press the Save Changes button
5. Move to the WebP Conversion section and click ‘Insert Rewrite Rules’
6. Go back to the plugin Settings page and save your changes
7. Head to the Media Library and choose all the files you plan to convert to WebP images
8. Click on the Bulk Actions drop-down menu and select ‘Bulk Optimize’
9. Hit ‘Scan for Unoptimized Images’ and start optimizing your images

Protect WordPress WebP Images

There may be times that you want to protect your WebP images. They can be file uploaded by users, including their personal information or private photos of your internal projects. You need to protect them from unauthorized access.

That’s where PDA Gold comes in handy. The plugin gives you a helping hand in securing your images of all types, including WebP files. Upon installation and activation, you can:

1. Open Media Library in your dashboard
2. Hover the WebP file names you want to protect
3. Click protect
   

Your WebP images become private now. The plugin also helps block search engines from indexing your files. In other words, they won’t appear on search results.

To grant file access to your users, simply create private download links and share with them by clicking on ‘Configure file protection.’ You can generate random private download links or customize your own ones to make them more meaningful.

Chances are that your users may send these links to their relatives or friends to view your WebP images. Luckily, the plugin lets you deactivate the links after a given time or a number of clicks. After that, users won’t use these links to view or download your files.

Make Use of WebP Images in Your WordPress Site

Although site owners understand the benefits of WebP images in speeding up websites and improving SEO, not all of you know how to use this next-gen file format effectively.

Since WebP images are not supported by WordPress versions older than 5.8, we’ve walked you through the guide to achieve that. You can use Allow Webp image plugin to add code to the theme functions.php file.

To convert JPG and PNG images to WebP format, we recommend EWWW Image Optimizer.

Don’t forget to give PDA Gold a try to protect your WebP images too!