How to Give Out Images as Webp in WordPress ( All Methods)

Do you know what type of format of photo or pictures Google accepts in this tech era? Do you ever feel that your so-called “optimized images” decrease your web page? If not, please test your website or a specific page on Page Speed Insights.

When you test your web page or web site, you’ll know how images make your site slow. But there is nothing to worry about it. Cause, I am going to tell you why.

First, Google wants those type of images, which is high quality but smaller file size. Second, photos which are load faster. And these two types match straight with WebP image format. So, it is to say that, WebP Serve images in next-gen formats.

WordPress Webp next-gen format

WebP is a format where you can find both high quality but small file size. Along with it’ll serve in fast loading. On top of that, it builds by Google.

Why you’ll learn to add WebP images:

WebP image is a format like jpg, jpeg, or png. But to run your web page or website fast, it using a small file size and low bandwidth. Let me give you a clear example to clarify the compared results between WebP with jpeg or png:

According to WebP Compression Study:

  • 25-34% smaller than a comparable JPEG image.
  • 26% smaller than an equal PNG image.
  • More than 80% reduce the file size while maintaining quality.

Now, a question may rise into your mind. And the question is, how WebP manage these reductions in file size, right?

Well, Google’s WebP holds both lossy and lossless compression. Lossy WebP uses “predictive coding” to lower the file size based on VP8 key frame encoding.

And lossless WebP uses a complex set of rules developed by the WebP team. For more info, please click this link!

When the images on a web page are about half the file’s size, small changes can give excellent results. That is why we will dive deeper into the matter.

So let’s learn how to add or use WebP images on WordPress.

Learn how to add or use WebP images on WordPress:

To add or use WebP images on WordPress, I have some handy and robust methods that are good to use. So, are you ready to learn these methods, then let’s start:

Method 01: Add WebP images using the Plugin

The very first method to add WebP images is to use the WordPress plugin. With the WordPress plugins, you can convert JPEG files to WebP to browse Chrome, Firefox, and Opera. It also shows the JPEG files to browse with Safari and other browsers that don’t help WebP.

So, do you want to know the name of the plugins? There are only a few great plugins, named by:

  1. WebP Express
  2. WebP Converter for Media
  3. ShortPixel
  4. Imagify
  5. Optimole

1. WebP Express:

It’s a popular WordPress plugin, comes to convert your JPEG, JPG, or PNG file into WebP format. But it’s built to reduce the image file size, fast loading, and provide a better user experience.

It also supports to change the situation. For example:

  • By routing jpeg/png images to a similar webp.
  • Replace image tags with picture tags by modifying the HTML.
  • Replace image URLs by changing the HTML.
  • Cache enabler combination.
  • Deliver webp to all browsers and add the webpjs javascript.

On top of that, it’ll serve to better rank on Google, plus less bandwidth use. And above all, almost 88% of all traffic and 86% of mobile browsing traffic are with browsers propping webp.

On a serious note, Apache, Lite Speed, and Open Lite Speed server support WebP by default. But for the Nginx server, you’ve to write the below context in their block:

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)

2. WebP Converter for Media:

It’s also a WP plugin, comes to speed up your website by converting JPEG, PNG, and GIF format into WebP. So, you can reduce the page weight without losing quality for the fastest loading.

This plugin also supports various ways to improve your website’s fast loading. For example:

  • Images convert and save in a separate directory.
  • Converting image works for all image sizes.
  • By default loading mode, it doesn’t change the image URL.
  • You can change the image URLs using the mod_rewrite module on the server.
  • If the .htaccess file block, a mode can loads images via PHP file.

When users want to download, they will not have to download much data. And at the same time server will be serving fast loading. So, you can call it a useful plugin both for the users and the server.

3. ShortPixel:

It’s a WP plugin built to help picture resize and compress that uploaded to your WordPress site. It has both Free and Paid. In the Free plan, there is a limited plan for 100 images only to optimize per month. And in the Paid plan, up to 5,000 images per month starting at $4.99.

But, to serve WebP images through ShortPixel, install the plugin from WordPress.org. Afterward, connect your API key (API Key will get by registering on a free ShortPixel account).

After activated, you can use the General Settings box to select the compression level.

ShortPixel

And to enable WebP images, you need to navigate the Advanced tab, then:

  • Look at the box for WebP Images.
  • Look at the box to Deliver the WebP versions (it’ll appear when you click the first box).
  • Click the button for Using the tag syntax (it’ll appear when you click the previous box).
  • And Finally, leave the default Only via WordPress hooks.
  • Then, save the changes you make.

ShortPixel Advanced Tab

4. Imagify:

It’s a familiar and famous image compress and resizer built by WP Rocket. It resizes and compresses the picture upload to your WordPress site.

It has both Free and Paid. In the Free plan, there is a limited plan for 25 MB only to optimize per month. And in the Paid plan, up to 1 GB per month starting at $4.99.

But, to serve WebP images via Imagify, install the plugin from WordPress.org. Afterward, connect your API key.

After activated, you can use the General Settings box to select the compression level.

imagify

And to enable WebP images, you need to scroll down to the optimization section. Then look for the WebP Format section:

  • Click the box of Create webp versions of photos/images.
  • Click the box of Display images in webp format.
  • Click the button for Using the tag syntax.

imagify configure

5. Optimole

It’s a little different WordPress image optimization plugin. It also resizes and compresses the picture upload to your WordPress site. But it adds two notable features, such,

  • It serves images via its private CDN
  • It gives real-time adaptive photos to deliver the optimal image for each visitor.

It has both Free and Paid. There is a limited plan to handle serving images of around 5,000 visitors per month in the Free program. And in the Paid plan, up to 25,000 visitors per month starting at $19.

So to start, first, install the plugin from WordPress.org. Second, connect your API key (API Key will get by registering on a free Optimole account).

After activated, it’ll start automatically optimizing your images via its CDN. There’s no need to enable it because Webp is on by default.

But to configure the other settings, go to Media → Optimole → Settings:

Optimole configure

Method 02: Serve WebP images using CDN

It’s the best, plus the most painless way only to add WebP images through CDN. As far as CDN is concern, you can found lots of CDN on the internet. But all they are not as good as useful.

That’s why I have come with three handy and useful CDN that is good to use. Such as:

  1. BunnyCDN
  2. Cloudflare with Polish (Pro plan)
  3. Cloudinary

1. BunnyCDN:

It’s a next-gen WordPress CDN for fast performance. And it’s built for edge storage and optimization service. In a word, it comes with ‘Bunny Optimizer’ for compress and converts to WebP images.

bunnycdn

It has both Free and Paid. In the Free plan, you’ve to download it from the WordPress.org plugin. And you can also start a free 14 days trial version from here. After that, you can enable it on your WordPress site and enjoy it.

And in the Paid plan, up to 100 TB per month starting at Standard Tier $4.50 per month and Volume Tier $1.75 per month.

It includes some rich features, like:

  • Restore static links with CDN links.
  • Add or remove specific directories.
  • Create custom CDN hostname.
  • Automatic HTTPS configuration.

2.Cloudflare with Polish:

It’s a one-stop solution CDN for website holders or users. And it’s all about Security, Performance, and Reliability. Cloudflare with Polish is all about compress images. And polish strip metadata and applies lossy or lossless compression also.

It has both Free and Paid. In the Free plan, you’ve to download it from the Cloudflare WordPress Plugin. After that, you can enable it on your WordPress site and enjoy it.

And in the Paid plan, it’s starting at $20 per month. But to activate Cloudflare with Polish, you’ve to do the below working:

  • First, go to the Cloudflare dashboard. Then check the Cloudflare account where you will activate Polish.
  • Make sure your domain is select and click the Cloudflare Speed app.
  • Afterward, scroll down to Polish.
  • Now select lossy or lossless from the Polish dropdown menu.
  • And at last click WebP.

3. Cloudinary:

It builds to automate your entire image management lifecycle. And it stores, transforms, and supply media with easy-to-use APIs or user interface. It also operates images with a URL-based API. And it also optimizes rich media through multi-CDN.

It has both Free and Paid. You’ve to sign it at the bottom from the Cloudinary official site or click here for a Free plan. After that, you can enable it on your WordPress site and enjoy it.

And in the Paid plan, 225k transformations or 225 GB of storage or bandwidth starting at $99 per month.

It includes some smart features, like:

  • It improved performance through faster loading and good looking websites.
  • It gives maximum productivity and activity with an excellent user experience.
  • Enterprise-grade technology combines with your Tech Stack.
  • Reduction in page weight and a boost in user engagement.
  • A bright path for businesses to give amazing visuals at the range.

Method 03: Use the WebP image in the Manual method

To use WebP images manually, you’ve to do a few working. And the first step is:

Step One: Adding WebP format in HTML

To add webp format in HTML, you have to convert your images, including your previous image format. And to do this manually, I have come with an easy and short plan.

  1. Navigate to this website by clicking here.
  2. Select and drop your images on dropbox.
  3. Your pictures will convert automatically. And after you finish converting, a download button will appear.
  4. Now download your photos.
  5. Afterward, edit the raw HTML code.

For example, your Image HTML code was like:

<img src="https://athemeart.com/wp-content/uploads//2021/09/webplogo.png" alt="athemeart" width="186" height="66" />

But now, you’re going to wrap the code with a little more HTML markup. Like:

    	
<picture>
<source srcset="https://www.athemeart.net/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" />
<img src="https://www.athemeart.net/wp-content/uploads/2016/09/webplogo.png" alt="gulshan kumar" width="186" height="66" />
</picture>

Step Two: Adding WebP format by Configure server settings

Bear in mind, those who use Apache, Light Speed, or Open Lite Speed server, you need to add the below code:

Serve Images with the correct Mime Type.
AddType image/webp .webp
    
Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

But for the Nginx server, the code is a little bit different. That’s why you need to add the below code:

location ~ ^(/path/to/your/images.+)\.(jpe?g|png)$ {
 if ( $http_accept ~* webp ) {
 set $webp "A";
 }

 if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) {
 set $file_without_ext $1;
 }

 if ( -f $file_without_ext.webp ) {
 set $webp "${webp}E";
 }

 if ( $webp = AE ) {
 add_header Vary Accept;
 rewrite ^(.+)\.(png|jpe?g)$ $1.webp break;
 }
}

And if WordPress does not support WebP format upload by default, then you need to add the below code:

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

So, these are the methods you can use or serve to add WordPress WebP images to your site. And on a serious note, WebP pic does not support all browsers.

Safari, iOS Safari, and outdated browsers don’t support WebP. But still, 80% of devices support WebP. Below is an image to show you the differences and comparative results of WebP.

WordPress Webp differences and comparative results

Wrapped Up:

WordPress WebP is an image format that is accepted by Google. And it’s the most useful image format to make your website rank higher in Google. Along with WebP supports with SEO, performance, fast loading, and much more.

At last, I hope that this post will benefit you. And don’t forget to give your reviews, as those are important to us. And also hope you’ll stay connected with us for further interesting, engaging, and informative articles.

Inspire us with your love!

Facebook Twitter Pinterest Reddit

Zakariar Habib is a freelance writer with more than 2 years. He is trying to learn about new technology that will keep him updated with the modern tech world. You can find him at the zakariarhabib.com.

You can check also

Take a look! how reaching out the post

  • Gerry
    February 26, 2021 at 4:27 pm

    All fine, but what about themes? ShortPixel gives you support for webp images in posts and pages. But, themes like Solidad do many things their own way, and ignore the webp images. And some of the theme images may be shown on all pages, so webp would be useful there.

    However, it appears that none of the dozens of WordPress WebP articles even mentions this. Are there very few themes out there with this issue, or is it just being ignored?

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*