How to Upload WebP Images in WordPress | Full Guide + Tutorial

The WebP format promises better compression than JPEGs and faster loading speeds for your website or blog visitors with WebP support. This article explains “how to upload WebP images in WordPress “

What effects by using webp images in Website:

• Increase Website Speed
• Less Page Size ( Better Optimized Webpage will be served)
• Increase in Page views by 11- 15%
• High Image quality with smaller size
• Shrink Image sizes upto 35%

Actually,

Nowadays WordPress does not allow uploading WEBP format images directly. But we can upload webp images through Plugin also without Plugin.

In this tutorial, we are going to learn how to upload .webp images in WordPress with Plugin or also without plugin method.

Both methods are very easy….

Hey guys, I am Sandeep. Today I am going to tell you how you can easily upload a webp image in WordPress. 

In recent times, it has been observed that Image Optimization is an important aspect while uploading an image as it plays an important role in making your website responsive and leads rankings in search engine results pages (SERPs).

What are WebP Images?

WebP is a type of image file that has several advantages over other file formats.

This image format was introduced by Google in 2010. Google designed this format to create files that are smaller for the same quality, or of higher quality for the same size, than JPEG, PNG, and GIF image formats. 

This is an Image format (based on the VP8 video format) that supports lossy and lossless compression, as well as animation and alpha transparency. WebP generally has better compression than JPEG, PNG and GIF and is designed to supersede them

I also used WebP images, And Really it helps in increasing website speed. Because Images are the main and big object in any website.

And if we optimize images then, our website speed can be increased by 40-60% . Thats what I experience in my website.

How WebP Image Format Works?

Lossy WebP compression uses predictive coding to encode an image, the same method used by the VP8 video codec to compress keyframes in videos. 

Predictive coding uses the values in neighboring blocks of pixels to predict the values in a block, and then encodes only the difference.

You can visit this page for more information about its working:

https://developers.google.com/speed/webp#how_webp_works

Why Should We Use WebP Image Formats in Websites instead of JPEG and PNG?

In January 2014, Google announced officially that they use the WebP image format for their image search results. 

This has stirred webmasters and web optimizers into questioning whether webp should be used in place of jpeg images. But now Almost every website optimizer and webmasters started using WebP Images.

Because it’s high quality with lesser size. Also Google Recommends to use webp Images for faster site loading.

Definitely You will also started using after knowing the benefits of WebP images.

Benefits of Using WebP Format Images:

How are WebP images beneficial to users? The short answer is that WebP images can help save data and load faster. Your website looks great and your visitors will love how fast your site loads. There are many more reasons to use WebP images in your site.

Benefits using WebP Images in websites:

• WebP images are 26-36 % smaller in size as compared to PNG and JPG with the same dimensions and Quality. Which helps in storage saving.
• WebP supports 24-bit RGB color with an 8-bit alpha channel, on the other hand , GIF’s supports 8-bit color and 1-bit alpha.
• WebP images can be served in bytes, It means, It will loads very faster as compared to another image formats like PNG/JPEG.
• Also It saves your hosting bandwidth in a very smart way, because these images are served in bytes.
• WebP can be compressed through both lossless and lossy compression.
• WebP can be used on both graphics and photography.

Also Read: How to increase Domain Authority in 25 Days + 615+ Backlinks Providing site list

File Size difference between PNG and WebP (When PNG converted to WebP Format)

This experiment is done by keycdn. Then converted PNG Image into Compressed PNG and in WebP Format.

Images are same and quality is almost same, and You can see the the image size difference in following table: 

File name	Original PNG	Compressed PNG	WebP format	Size difference
png-to-webp-1.png	44 KB	34 KB	30 KB	32%
png-to-webp-2.png	46 KB	35 KB	33 KB	28%
png-to-webp-3.png	43 KB	31 KB	25 KB	42%
png-to-webp-4.png	30 KB	24 KB	18 KB	40%
png-to-webp-5.png	15 KB	11 KB	8 KB	47%
png-to-webp-6.png	34 KB	24 KB	18 KB	47%
png-to-webp-7.png	15 KB	13 KB	8 KB	47%
png-to-webp-8.png	63 KB	47 KB	44 KB	30%
png-to-webp-9.png	48 KB	36 KB	33 KB	31%
png-to-webp-10.png	17 KB	14 KB	11 KB	35%
png-to-webp-11.png	18 KB	13 KB	9 KB	50%
png-to-webp-12.png	61 KB	45 KB	39 KB	36%
png-to-webp-13.png	32 KB	25 KB	21 KB	35%
png-to-webp-14.png	26 KB	21 KB	17 KB	35%
png-to-webp-15.png	14 KB	12 KB	9 KB	36%
png-to-webp-16.png	36 KB	27 KB	24 KB	33%
png-to-webp-17.png	14 KB	12 KB	8 KB	43%
png-to-webp-18.png	21 KB	18 KB	13 KB	38%
png-to-webp-19.png	42 KB	30 KB	27 KB	36%
png-to-webp-20.png	23 KB	20 KB	18 KB	22%

By Compressing our PNGs resulted in a 31.86% decrease in average image size. And remember, Optimus uses lossless compression, which means images still look as sharp as they did before. 

But the exciting part is that WebP resulted in a 42.8% decrease in average image size. So in our scenario, just converting to WebP decreased our already compressed PNGs by another 11%

Speed Test ( PNG vs Compressed PNG vs WebP Images):

This Test is done by Keycdn. They ran Webpage Load speed test 5 times each for PNG, Compressed PNG and WebP format Images.

Lets Look out, which image format will effects the webpage loading speed.

However webpage loading speed also depends upon your website’s environment. Well this test isn’t mean that this speed will be same for all websites.

Image Format:	PNG	Compressed PNG	WebP
Page Load Speed	2.145 s	2.1s	2.078 s
Total Page Size	849 KB	710 KB	634 KB

In this testing, by using WebP images as opposed to uncompressed PNGs, our load times decreased by 3% and total page weight decreased by 25%. 

And then we also saw slight decreases in load times when comparing compressed PNGs to WebP.

File Size difference between JPG and WebP (JPG vs WebP)

Keycdn Shows us, the compression and size difference between JPG and webp format Images

This test is done on large sized images.

File name	Original size	Compressed JPG	WebP format	Size difference
jpg-to-webp-1.jpg	480 KB	407 KB	43 KB	89%
jpg-to-webp-2.jpg	659 KB	578 KB	113 KB	80%
jpg-to-webp-3.jpg	787 KB	715 KB	127 KB	82%
jpg-to-webp-4.jpg	617 KB	543 KB	61 KB	88%
jpg-to-webp-5.jpg	605 KB	543 KB	70 KB	87%

How to Convert Any Format(PNG,JPEG, JPG, etc.) into WebP Format

• Search cloud convert on Google.
• Select the Image format that you wants to convert into WebP format.
• Now upload Your Image that you wants to convert into WebP format.
• Then click on convert and then download your converted WebP Image.

How to Upload WebP Images in WordPress

Basically, there are two ways to upload webp Images in WordPress.

• Through Plugin
• By adding some code to your wordpress.

I will tell you both methods to upload WebP images.

But be aware of which browsers supports WebP format images.

Before we are go through How to upload WebP Images in wordpress, I wants to tell you that, WordPress 5.8 and 5.8+ supports WebP image formats. It means you don’t need to install any plugin in wordpress version 5.8 or 5.8+. You can just simply Upload WebP format images in media library, Like PNG and JPEg images. 

So, If you have woWordPressersion 5.8 or above, then you don’t need to do anything. You can simply upload your webp image formats to your WordPress site.

But if you have the below version of wordpress from 5.8, then you can look in this article. Here I have given a step-by-step guide to Upload WebP Images in wordpress.

How to Upload WebP Images in WordPress Using Plugin?

Using Plugin is the easiest way to upload WebP Images or convert your exciting Images into WebP Format.

This is the most recommended method to Upload webp images in wordpress:

• Go to your wordpress dashboard >Plugins > Add New Plugin.
• Search Webp in search box.
• Now Download any Plugin, Like Imagify, WebP Express etc. That converts or give us freedom of uploading webp format images in wordpress.
• Now click on Activate Plugin after installation.
• You have successfully Installed the plugin.

Now lets do setup of this plugin.

To enable WebP images, scroll down to the Optimization section and find the WebP Format section:

1. Check the box to Create webp versions of images
2. Check the box to Display images in webp format…
3. Select the radio button to use <picture> tags

Bravo !! You have successfully setup the plugin, and Now you are ready to upload WebP Images in your wordpress.

Let’s Move toward the next Method which is “How to upload webp images without using plugin”

How to upload webp images in WordPress without using plugin in just 5 Steps

You can’t Upload WebP Images in your wordpress by default. You have to add some code in function.php file. 

Just follow these 5 steps:

• Go to your wordpress dashboard.
• Then Goes to Appearance >Theme Editor> functions.php
• Copy and Paste the code( Code given below) at the end of function.php file.

Now you are ready to Upload webp Images in wordpress without any plugin.

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

Now you can upload webp format images in wordpress.

!! But you can’t see the preview of images in Media Library of your wordpress dashboard.

To fix this issue !!!!

Add some extra code to function.php

• Copy and paste this code in last of function.php file

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

Now you are ready to upload Webp Images in wordpress without any plugin.

Which Browsers Supports WebP format images??

This is also an important question, usually peoples asks.

Here is the list of browsers which supports webp format images…. According to developersgoogle.com

• WebP lossy support
  • Google Chrome (desktop) 17+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 11.10+
  • Native web browser, Android 4.0+ (ICS)
• WebP lossy, lossless & alpha support
  • Google Chrome (desktop) 23+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 12.10+
  • Native web browser, Android 4.2+ (JB-MR1)
  • Pale Moon 26+
• WebP Animation support
  • Google Chrome (desktop and Android) 32+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 19+

These browsers used by 95% peoples. It means if you use webP images on your website then 95% people can easily see your images.

How WebP Images Improves Your Website SEO?

First of all, these WebP Images are nextgen images that google actually recommends using in websites.

• WebP images are next gen Images,which is recommended by Google Insights to increase website speed.
• It will increase website speed.

As of 2018, Google has announced that website speed will be a ranking factor for search results. 

So, It can effectively increase your site ranking.

If you wants to know “How to effectively Increase Your Site speed” Then you can read “ 9 Ultimate Steps to Instantly Increase Website Speed”

Summary

Guys, In this article you have read that “How you can Upload WebP format images in wordpress.”

Basically,

WebP images are next-gen images, which are recommended by Google insights to use in a website, for better website page load speed.

I tried this and it really Increases my website page load speed impressively.

WebP images are generally 25 to 37% less size images as compared to PNG and JPG on the same quality of image.

I recommend you to start using Webp images on your wordpress website for better quality , better speed of website.

WordPress versions less than 5.8, does not allows you to upload webp images directly. So , I have explained in this article, how you can upload webp images in wordpress.

Hope guys, You’ll get some useful information from this article, If you like our article, please share and subscribe our website’s newsletter for upcoming articles.