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?

How webp 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?

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 nameOriginal PNGCompressed PNGWebP formatSize difference
png-to-webp-1.png44 KB34 KB30 KB32%
png-to-webp-2.png46 KB35 KB33 KB28%
png-to-webp-3.png43 KB31 KB25 KB42%
png-to-webp-4.png30 KB24 KB18 KB40%
png-to-webp-5.png15 KB11 KB8 KB47%
png-to-webp-6.png34 KB24 KB18 KB47%
png-to-webp-7.png15 KB13 KB8 KB47%
png-to-webp-8.png63 KB47 KB44 KB30%
png-to-webp-9.png48 KB36 KB33 KB31%
png-to-webp-10.png17 KB14 KB11 KB35%
png-to-webp-11.png18 KB13 KB9 KB50%
png-to-webp-12.png61 KB45 KB39 KB36%
png-to-webp-13.png32 KB25 KB21 KB35%
png-to-webp-14.png26 KB21 KB17 KB35%
png-to-webp-15.png14 KB12 KB9 KB36%
png-to-webp-16.png36 KB27 KB24 KB33%
png-to-webp-17.png14 KB12 KB8 KB43%
png-to-webp-18.png21 KB18 KB13 KB38%
png-to-webp-19.png42 KB30 KB27 KB36%
png-to-webp-20.png23 KB20 KB18 KB22%

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:PNGCompressed PNGWebP
Page Load Speed2.145 s2.1s2.078 s
Total Page Size849 KB710 KB634 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 nameOriginal sizeCompressed JPGWebP formatSize difference
jpg-to-webp-1.jpg480 KB407 KB43 KB89%
jpg-to-webp-2.jpg659 KB578 KB113 KB80%
jpg-to-webp-3.jpg787 KB715 KB127 KB82%
jpg-to-webp-4.jpg617 KB543 KB61 KB88%
jpg-to-webp-5.jpg605 KB543 KB70 KB87%

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.
Select Image, which you wants to convert into WebP format
Download webp converted images.

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.
Plugins for uploading WebP Images in WordPress

Now lets do setup of this plugin.

How to setup Imagify Plugin for uploading webP images in wordpress

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
Setup Imagify

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' );
Code enter in theme.php for uploading webp imges in wordpress

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??

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?

How webp images improves 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.

2 thoughts on “How to Upload WebP Images in WordPress | Full Guide + Tutorial”

  1. Now WordPress itself accepting the WebP format but hosting provider is not accepting for shared, cloud plans. They are allowing only VPS plan.

    Is there any way to bypass this with code?

    Thanks
    Giri

    Reply

Leave a Comment