7 Powerful Reasons To Use Only WebP Images for WordPress

“Images Say A Thousand Words”  I know is really important but might not be as clear-cut: Why Should Bloggers Implement only WebP Images for WordPress?  Should you convert image to webp for your blog or website? 

I’m 100% confident that you will not only love this post but also benefit from it.

In this blog post, I’ll share how important it is to have WebP enabled on WordPress, how it can affect your google rankings, & how to enable it on your WordPress site.

So, let’s start.

What’s The Image Format?

The webp format is a web-based image format that provides lossy compression for images on the web.

The webp format was developed by Google and it outperforms JPEG in terms of file size, while still providing quality comparable to PNG.

(Not to mention, the PNG image format has the highest grade image quality as of now).

To be precise, WebP is way smaller than other image formats.

It is 26% smaller than the other kind, PNG.

WebP images are also 25-34% smaller at the same quality level as JPEG images.

That’s a lot.

This means if you’ve 1GB of JPEG images on your WordPress site, you can store the same amount of images in just 650MB of space on your server.

That is if you’re using WebP format instead of plain old JPEG.

7 Reasons Using The WebP Images In WordPress

1: Reduce the file size of your images by up to 50%

By converting your images to WebP format, you’ll be able to reduce the size by up to 35% for JPEGs and 50% for PNG files.

Heavy files also take time to load completely & if the size exceeds 500KB, it slows down the website entirely.

Who wants heavy files that take too much space & consume your server bandwidth?

2: Consume Less Storage Space

The second obvious reason to use WebP is that it uses less storage.

Many server companies charge their clients additionally for the upgraded storage space. 

But with WebP enabled, you can save 35% of your overall hosting costs.

3: Use Less Bandwidth

Bandwidth & storage space are 2 different things.

In simple words, bandwidth refers to a lane in which the data can get transferred from the server to your users on the web.

Suppose, if you’ve got 1GB of server bandwidth, the max amount of files you can transfer in 1 go shouldn’t exceed 1GB.

And images make the most part.

Less image size will use less bandwidth & thus save your server resources which can be better utilized in other processing tasks.

As not only do images get transferred by your server, but your server also sends other important data as well.

If the image size is high, it’ll consume much of the bandwidth, giving quite less window for other files (such as text) to get transferred.

4: Image SEO & Google Guidelines Compliant

Since WebP image format is officially released by Google & they’ve also claimed that WebP is optimized for images on the web.

In Google Page Speed Insights, you also get to see a repeated recommendation that, “Try To Use WebP Images”

Thus, people using WebP versions of images rather than JPEG or PNG tend to do better in image SEO since they’re compliant with the Google guidelines.

This also helps them drive traffic to their blog not only from Google search but also image search as well.

Related: 13+ Image SEO & Optimization Tips That’ll Definitely 17X Your Blog Traffic

5: Faster Loading Web Pages

As stated, Webp lossless images are smaller in size.

They highly reduce your page loading times.

Also, a smaller file size takes less time to get transferred from the server to your client browsers.

On my personal website, when I switched to WebP from PNG, I decreased loading time by 2.5s.

Then, my page size was reduced from 2MB to just 700KB, thus saving my bandwidth & decreasing my loading times simultaneously.

6: Improve Your Core Web Vital Score

Recently, Google has emphasized the Core Web Vitals & stated how much they’re important in determining your rankings.

There’s a term in CWV (Core Web Vital) named LCP (Largest Contentful Paint).

It refers to the time it takes for a part of your web page to get rendered by your browser.

Larger your file size or dimensions of the image, the more time it will take to paint that image in your browser, thus increasing the LCP & reducing the interaction time.

WebP minimizes that by reducing the file size for you.

Also, keep in mind that your image dimensions should not exceed 1024px in width & overall size shouldn’t go beyond 100Kb for a better experience.

7: Deliver A Good User Experience

Overall, with all the benefits mentioned above, it helps you minimize costs, improve performance, increase google rankings, etc., and make the user experience for your visitors highly appealing.

Therefore, the chances of your site ranking higher increases by multiple folds.

How To Enable WebP Support On WordPress Website To Upload WebP Images?

Sadly, WordPress by default doesn’t support uploading WebP images.

But there are 2 workarounds to it that I’ve figured out.

Either you can use plugins provided by Shortpixel or Imagify to create WebP versions of your PNG or JPEG Images & then deliver WebP images on the go.

(This will create a separate WebP version for all your images. Old ones will still be there)

This method is most beneficial if you’re running a very large site & can’t convert images to WebP manually, as these plugins can do the nitty-gritty work all by themselves without any manual work.

But for me, I’m not a plugin-oriented guy.

Why?

Adding WordPress plugins for little tasks like these on WordPress sites every now & then increases the number of plugin files (JS & CSS files) & this puts a load on your server thus reducing its performance.

It also makes your sites load slow which in turn decreases your google rankings.

I prefer the manual method over plugins.

But you can go with the above plugins if your site contains a lot of images as it’ll be nearly impossible to manually convert all the images to WebP.

Just follow the below steps & you’ll be good to go:

Step 1: Create A Child Theme First

If you’re not using a child theme already, create one using this plugin.

This won’t work without a child theme.

It’s a 2 step process & after your child theme is created, you can then delete this plugin.

Step 2: Activate Your Child Theme

Go To Appearance -> Themes -> Activate YourThemeChild

Step 3: Open Your Theme Editor

Go To Appearance -> Theme Editor -> functions.php

Step 4: Copy & Paste The Code Below Into Your functions.php file

//** *Enable upload for webp image files starts*/
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);
//** *Enable upload for webp image files ends*/

Step 5: Click On Save Changes

Now, you’ll be able to upload WebP images directly to WordPress without seeing any errors at all.

You don’t need to make any changes to your htaccess file or any other files after this.

This is the simplest & easiest way to enable WebP support on WordPress after adding WordPress Plugin.

Few More Tweaks & Hacks To Make Your WebP Image Load Faster

Many image editing tools or software don’t provide the feature to directly export your image as WebP files.

To counter this, you can export these images in their normal JPEG & PNG formats & bulk convert them to WebP using this free tool.

Use WP Rocket to Use Only WebP Images

WP Rocket is by far my most favorite WordPress caching plugin.

I can say that because I’ve used more than 10+ caching plugins & none of them matches the level of WP Rocket.

In WP Rocket, you also get an option to optimize & create separate cache files (not separate image files) for your WebP images to improve your deliverability speeds & optimize their file sizes as well.

Use A Push CDN Service To Host Your Images

Many FREE CDN services like Cloudflare, pull CDN services.

Try using A Push CDN Service for better image optimization & delivery.

Before purchasing any CDN service, make sure it also allows for further compression.

Enable Browser Caching

If you have a website with 10 pages, and each page has 5 images on it – enabling Browser Caching can actually help improve the speed score!

In other words, if there are multiple requests for an image from various users at different times of day or night then your server will be doing more work to send those files.

You may not know this, but browsers cache what they see as being most relevant so even after hitting reload to get fresh content, that cached version will show up unless told otherwise.

To enable this on WordPress, I use WP Rocket Plugin & further reduce the request for images made to my server.

It’s my All In One & most favorite plugin of all time.

PRO-TIP: Clear The Entire Background Of Your Images

If you’re using a picture that has a white background, you can just remove the background of those images entirely.

By doing this, you’re not only further reducing your file size, but to your end-user, they’ll not see any difference at all as your WordPress theme background is also white.

I practice this technique on my blog website always.

General FAQ’s Regarding Use Only WebP Images

Do Modern Browsers Support WebP File Format?

In short, Yes. Mostly all modern browsers support WebP Image File.

What Is The Best WebP Converter?

ImageToWebP is the best FREE WebP Converter I found to date. It can bulk convert your images to WebP within seconds.

What’s The Best WebP WordPress Plugin?

You’ll need to install plugins like ShortPixel & Imagify that will create an additional version of your image files on WordPress & then deliver them.

However, I don’t recommend this as you’re eating up your storage space since you’re using 2 images for a single purpose.

One is being used while the other is sitting idle & eating your precious storage as well.

Conclusion: Should You Use WebP Images On Your WordPress Site?

WebP images are a great way to make your website more efficient.

They can be used on WordPress sites in conjunction with plugins like WP Rocket, which provide additional optimization for web content.

You should use the right type of image depending on what you need it for and how large it is.

This way you will have plenty of room left over for other features, such as videos!

The WebP format might be a good option if you have been using JPEGs or PNGs for your website images.

It will take some time to get used to the file changes, but there are plenty of other benefits that come with this change.

Remember:
“When Winds Of Change Blow, Some People Build Walls, While Others Build Windmills”

If you’re looking for an alternative type of image file and don’t want to wait longer than usual for the full page to load, then definitely try out WebP!

I’m 100% sure, you’ll love the changes you’ll get with it.

Your Turn on Why Use Only WebP Images for Your Blog or Website

What are your thoughts about using only WebP images for WordPress?

Tell us in the comments below so we can discuss.

And if you’ve any doubts, regarding any topic or you’re facing any problem regarding setting up WP Rocket on your blog, just visit The Mistaken Man & let me know if you need any help.

• Author
• Recent Posts

Say Hi Here

Palash Nag

Blogger & Content Writer at The Mistaken Man

I'm Palash, founder of The Mistaken Man. I am the only member at TMM who is not a blogger or freelancer myself, but instead more of an entrepreneur and content writer.

My mission is to help people find their own path in life.

I do this by sharing what I've learned with others through my blog.

I have over 10,000 Monthly Readers who come to my site to learn how they can make a living through Blogging and Affiliate Marketing.

If you're looking for someone who can get your website up and running quickly, then check out my site for Blog & Article Writing Services today!

Say Hi Here

Latest posts by Palash Nag (see all)

• 7 Powerful Reasons To Use Only WebP Images for WordPress - June 28, 2021